text-overflowで長い文字を「…」で省略しよう

このレッスンでは、text-overflowを使った長い文字列の省略表示を学び、レイアウトを崩さずにテキストを収める方法を理解することを目標にします。「CSS text-overflow ellipsis」で調べている方向けです。

white-space: nowrap・overflow: hidden・text-overflow: ellipsisの3つをセットで指定すると、枠に収まらない長い文字列を「…」で省略して1行に収められます。カード一覧のタイトルなどでよく使うテクニックです。

サンプルコードでは、.titleに3つのプロパティをすべて指定し、幅150pxの枠に収まりきらない長いタイトルが「…」で省略される様子を確認しています。3つのうち1つでも欠けると、省略表示は正しく機能しません。

初心者がよくつまずくのが、この3つのプロパティのどれか1つだけを指定して、期待通りに省略されないと悩んでしまうことです。white-space: nowrapで改行を防ぎ、overflow: hiddenではみ出た部分を隠し、text-overflow: ellipsisで「…」を表示する、という3段階の役割分担を理解しておくと覚えやすくなります。

長さの異なる商品名や記事タイトルが並ぶ一覧ページで、レイアウトが崩れるのを防ぎつつ整った見た目を保てます。3つのプロパティはセットで覚えておくと、様々な場面ですぐに応用できます。