できない.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 だけを指定しても省略記号は出ない。
折り返しを止める white-space: nowrap と、はみ出しを隠す overflow: hidden が揃って初めて機能するためである。
複数行で省略したい場合は、display: -webkit-box と -webkit-line-clamp を使う別の書き方になる。

この記事は役立ちましたか？