Webデザインにおいて、スペースの制限により1行に収まらないテキストを見やすく表示するための方法として、三点リーダー「…」を使用してテキストを自動で省略する方法があります。この方法は、特にレスポンシブデザインやカード型のデザインなど、スペースに制約がある場面で非常に役立ちます。
この効果を適用するためには、以下のCSSを使用します。
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;「overflow: hidden;」は、要素のボックス外に内容がはみ出た場合にその部分を非表示にします。
「text-overflow: ellipsis;」は、テキストが要素のボックスをはみ出した場合に三点リーダーで省略します。
「white-space: nowrap;」は、テキストを1行に強制的に収めます。
この組み合わせにより、テキストが1行を超えると自動的に末尾が「…」で省略される効果を実現できます。