text-overflow

用于控制元素文本如何溢出的工具类。

快速参考

类	属性
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-ellipsis	text-overflow: ellipsis;
text-clip	text-overflow: clip;

示例

截断文本

使用 truncate 工具类阻止文本换行，并在需要时用省略号（…）截断溢出的文本：

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<!-- [!code classes:truncate] -->
<p class="truncate">The longest word in any of the major...</p>

添加省略号

使用 text-ellipsis 工具类，在需要时用省略号（…）截断溢出的文本：

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<!-- [!code classes:text-ellipsis] -->
<p class="overflow-hidden text-ellipsis">The longest word in any of the major...</p>

裁剪文本

使用 text-clip 工具类在内容区域的边界处截断文本：

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<!-- [!code classes:text-clip] -->
<p class="overflow-hidden text-clip">The longest word in any of the major...</p>

这是浏览器的默认行为。

响应式设计

使用 md: 等断点变体作为 text-overflow 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

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

更多关于变体的用法，请参阅变体文档。