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.
<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.
<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.
<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>
在 变体文档 中了解更多关于使用变体的信息。