text-overflow

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，這個詞指的是因吸入非常細的二氧化矽顆粒（特別是來自火山）而感染的肺部疾病；在醫學上，它與矽肺病相同。

<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: 這樣的斷點變體，僅在中等螢幕尺寸及以上應用該實用程式

<p class="text-ellipsis md:text-clip ...">  <!-- ... --></p>

在變體文件中深入了解如何使用變體。