テキストの省略

クラス

どちらも幅に制約が必要です。Flex または Grid の項目内では、その項目に min-w(0) を指定して縮められるようにします。

表示を制限しても全文へのアクセスは残す

truncate は、オーバーフローの非表示、省略記号、折り返し禁止を組み合わせます。オーバーフローを発生させるには、インライン方向の幅が有限のブロックコンテナーが必要です。幅に制約のないインラインの span に適用しても、1 行のプレビューにはなりません。

フォント、幅、テキストは同じで、省略するクラスだけが変わります。省略記号はブラウザーがネイティブに描き、各要素には全文の文字列が残ります。

テキストによる説明

1. 各テキストは幅 192px、フォントサイズ 14px、行の高さ 24px です。
2. 最初のテキストは自由に折り返し、全行が入るように高さが増えます。truncate は 2 番目を 1 行に保ち、あふれた部分を省略記号で隠します。
3. clamp-lines(2) は 3 番目のテキストの折り返しを許可し、接頭辞付きの line-clamp の組み合わせで表示を 2 行に制限します。
4. 3 つの要素はすべて同じ全文を含んでいます。読者が全文を表示して読む必要がある場合は、別の展開機能やリンクが必要です。

clamp-lines(2) は接頭辞付きの line-clamp の組み合わせを使います。具体的には、display: -webkit-box、縦方向のボックス、2 行の制限、オーバーフローの非表示です。行数には正の整数を使います。折り返しを許可するため、truncate やその white-space: nowrap と併用しないでください。

テキストは DOM に残ります。切り取りは表示上の制約であり、文字列を短くしたり、展開する仕組みを提供したりするものではありません。重要な情報には実際のリンクや展開可能な全文表示からアクセスできるようにし、ホバー時だけ表示される title に頼らないでください。

Flex または Grid の項目は、自動最小サイズによって利用可能な空間より広いままになることがあります。縮めたい項目に min-w(0) を設定し、その中のテキストの幅を制約します。行数を制限する場合は、padding によって隠した行が見えないよう、padding をラッパーに指定してください。

この組み合わせスタイルは display と overflow の宣言を持っています。flex、grid、または可視のオーバーフローで上書きすると、行数制限が壊れることがあります。独自の省略ルールには、ネイティブプロパティを明示的に使ってください。

関連項目： ネイティブのテキストオーバーフロー、従来の行数制限.

使用例

ファイル名を 1 行に、要約を 2 行に収めます。詳細を展開すると、どちらも全文を読めます。

<article class="… max-w-3xs">  <p class="… truncate">field-notes-autumn-collection-final-v03.fig</p>  <p class="… clamp-lines(2)">Good interfaces make space for…</p>  <details><summary>Read full details</summary><p>field-notes-autumn-collection-final-v03.fig</p><p>Good interfaces make space for…</p></details></article>

@layer theme {  :root,  :host {    --container-3xs: 16rem  }}@layer utilities {  .clamp-lines\(2\) {    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;    overflow: hidden;    overflow-wrap: break-word;    text-overflow: ellipsis  }  .truncate {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap  }  .max-w-3xs {    max-width: var(--container-3xs)  }}

カスタマイズ

プリセットはこれらのクラスを @utility で定義しています。スタイルシートで同じ名前を定義すると、元の定義を置き換えられます。

@utility truncate {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}@utility clamp-lines(--n <integer>) {  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: var(--n);  overflow: hidden;  overflow-wrap: break-word;  text-overflow: ellipsis;}

関連項目： ユーティリティの定義、タイポグラフィ.