1. 字体排印
  2. text-overflow

字体排印

text-overflow

用于控制元素文本溢出方式的实用工具。

类名样式
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 实用工具在需要时用省略号 (…) 截断溢出的文本

在主要的英语词典中,最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis, 指的是因吸入非常细小的二氧化硅颗粒(特别是火山灰)而感染的肺部疾病;医学上,它与矽肺病相同。

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

裁剪文本

使用 text-clip 实用工具将文本裁剪到内容区域的边界

在主要的英语词典中,最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis, 指的是因吸入非常细小的二氧化硅颗粒(特别是火山灰)而感染的肺部疾病;医学上,它与矽肺病相同。

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

这是浏览器的默认行为。

响应式设计

前缀一个 text-overflow 实用工具 使用断点变体,例如 md:,仅在以下情况下应用实用工具中等 屏幕尺寸及以上

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

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策