text-overflow

要素のテキストがどのようにオーバーフローするかを制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`truncate`	`overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`
`text-ellipsis`	`text-overflow: ellipsis;`
`text-clip`	`text-overflow: clip;`

truncate

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

text-ellipsis

text-overflow: ellipsis;

text-clip

text-overflow: clip;

例

truncate ユーティリティを使用して、テキストの折り返しを防ぎ、オーバーフローしたテキストを必要に応じて省略記号（…）で切り捨てます。

主要な英語辞書の中で最も長い単語は pneumonoultramicroscopicsilicovolcanoconiosis です。これは、非常に細かいシリカ粒子、特に火山からの吸入によって contracted する肺疾患を指す単語です。医学的には、シリコーシスと同じです。

<p class="truncate">The longest word in any of the major...</p>

text-ellipsis ユーティリティを使用して、オーバーフローしたテキストを必要に応じて省略記号（…）で切り捨てます。

<p class="overflow-hidden text-ellipsis">The longest word in any of the major...</p>

text-clip ユーティリティを使用して、コンテンツ領域の限界でテキストを切り捨てます。

<p class="overflow-hidden text-clip">The longest word in any of the major...</p>

これはブラウザのデフォルトの動作です。

プレフィックスa text-overflow ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです

<p class="text-ellipsis md:text-clip ...">
  Lorem ipsum dolor sit amet...
</p>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。