text-overflow

1行の箱から文字がはみ出したとき、切れた続きがあることをどう示すか指定するプロパティ。末尾をそのまま切る表示と、省略記号を付ける表示を比べます。

CSSの`text-overflow`とは？

1行からはみ出した文字をそのまま切るか、省略記号で示すかをライブプレビューで比べながら、clip・ellipsisと必要な組み合わせを初学者向けに解説します。

遊んでみよう

1行の末尾を、切り取りと省略記号で比較

NEW ARTICLE

初学者のためのCSSレイアウトと文字組み完全ガイド

表示幅が決まったカードの長い見出し

clip：箱の端で文字をそのまま切ります

CSS

.element text-overflow: clip;

値のパターン

はみ出した文字の示し方 text-overflow

text-overflowの構成要素

01clip

箱の端で文字を切る

初期値です。切れた位置に記号を加えないため、続きがあることは見た目だけでは分かりにくくなります。

02ellipsis

末尾へ省略記号を表示する

表示領域の内側へ「…」を置き、見えていない文字が続くことを伝えます。省略記号の分だけ本文の表示幅は短くなります。

03overflow + white-space

はみ出しと1行表示を先に作る

text-overflowだけでは文字は切れません。1行の省略表示では、overflowとwhite-spaceを一緒に指定します。

早見表

まずはclipとellipsisの違いを覚えます。どちらも、文字がインライン方向へ実際にはみ出しているときに効果が現れます。

01clip箱の端で文字を切り取る初期値

02ellipsis省略記号（…）で続きがあることを示す定番

03<string>指定した文字列を切れ目に表示する対応差あり

04値を2つ左端側と右端側の表示方法を分ける対応差あり

05fade切れ目を徐々に透明にする実験的

06inherit親要素の指定値を受け継ぐグローバル

よくある使い方

カードの長い見出しを1行へ収める

カード幅が決まっている一覧で、長い見出しを1行に保ち、続きがあることを省略記号で示します。

.card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

ファイル名の末尾を省略する

横幅が限られるファイル一覧で、長い名前が隣の日時や操作ボタンへ重ならないようにします。

.file-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

パンくずの長い現在地を短く見せる

狭い画面では現在地だけを省略し、前の階層やナビゲーション全体が押し出されるのを防ぎます。

.breadcrumb-current {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

ポイント

text-overflowだけでは、省略表示は始まらない。

text-overflowの初期値はclipで、ブロックコンテナーに適用され、子要素へは継承されません。1行の末尾を省略する定番パターンでは、overflow: hiddenとwhite-space: nowrapを同じ要素へ指定します。効果があるのはインライン方向へはみ出した内容で、箱の下側へあふれた複数行を省略する用途ではありません。値の切り替えは離散的です。省略した文字列も重要なら、別の場所や操作で全文を確認できるようにします。