末尾の「…」で大切な情報を隠していない？省略と全文表示を使い分けよう

カードの見出しが長いから、一行で「…」にする。見た目はそろうけれど、違いを表す言葉が末尾にあると、読者が項目を見分けられなくなることがあるよ。

この記事ではCSSのtext-overflowを使い、省略と折り返し、全文を読む手段を比べる。準備はブラウザだけ。ページ内の作例は架空の見出しを使い、入力や操作を保存・送信しない。

省略は内容を短く書き直す機能ではない

text-overflow: ellipsisは、表示領域からあふれた文字の端を、省略記号で示すための指定。元の文字列を要約したり、意味を保って短縮したりする機能ではない。

一般的な一行の例では、次の指定を合わせ、幅の制約も用意する。

.title {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

text-overflowだけで、どんな長文も自動で一行になるわけではないよ。横幅や改行、はみ出しの設定を一緒に見る必要がある。

動かしてみよう

記事下の作例は、最初に一行で見出しを省略する。「折り返して全文」を選ぶと、同じ文章が複数行になる。「全文を別に表示」では、省略の設定を保ったまま、下に元の文章を表示できる。

1. 初期状態で、末尾の条件が読めるか見る。
2. 折り返しへ切り替え、読める範囲と箱の高さを比べる。
3. 一行の状態へ戻し、全文表示のボタンを押す。
4. リセットで、省略・全文非表示の状態へ戻す。

期待するのは、元の文章は同じでも、表示方法で読める情報が変わること。タイトルが違う短い例だけでなく、長い日本語の文章で確かめよう。

どこまで隠してよいかを決める

価格の条件、製品の型番、日付など、選択に必要な部分が隠れるなら、一行の整列より内容を見分けられることを優先したい。重要な情報を分けて表示する方法もあるよ。

マウスを載せたときだけ出る説明に、全文を任せきらない。タッチやキーボードで使う人も、必要な情報へ到達できるか確認しよう。

箱そのものが縮まらない場合はFlexのmin-width、拡大時の確認はブラウザのズームへ。

参照した公式資料

• MDN：text-overflow

確認日：2026年10月24日。