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>

在变体文档中了解有关使用变体的更多信息。