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

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

静的確認

公開: 2026-07-22

プレビュー

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

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

つまずき

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