できない.dev

CSSでテキストを1行で省略するには

white-space・overflow・text-overflow を組み合わせ、1行に収まらないテキストの末尾を … で省略表示する基本形を示す。

未実行 CSS の構文と仕様で確認したもので、ブラウザでの描画確認はまだ行っていない。

公開: 更新:

プレビュー
<p class="truncate">これはとても長いテキストで、コンテナの幅に収まらないぶんは末尾が三点リーダーで省略される。</p>
.truncate {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 6px;
  font-family: system-ui;
}

text-overflow: ellipsis には、折り返しを止める white-space: nowrap と、はみ出しを切る overflow: hidden を必ずセットで添える。
3 つが揃って初めて末尾が … になるためである。

つまずき

text-overflow: ellipsis だけを指定しても省略記号は出ない。
次の 3 つが揃って初めて機能する。

  • white-space: nowrap（折り返しを止める）
  • overflow: hidden（はみ出しを隠す）
  • text-overflow: ellipsis（末尾を … にする）

複数行で省略したい場合は、display: -webkit-box と -webkit-line-clamp を使う別の書き方になる。

できない例: ellipsis だけ（折り返す）
.truncate {
  max-width: 220px;
  margin: 0;
  padding: 8px 12px;
  background: #f1f5f9;
  text-overflow: ellipsis;
}
できない例: overflow: hidden が無い（はみ出す）
.truncate {
  max-width: 220px;
  margin: 0;
  padding: 8px 12px;
  background: #f1f5f9;
  white-space: nowrap;
  text-overflow: ellipsis;
}
できる例: 3 つをそろえる
.truncate {
  max-width: 220px;
  margin: 0;
  padding: 8px 12px;
  background: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

このコードで動いた？