排版
text-overflow
用于控制元素文本如何溢出的工具。
| 类 | 样式 |
|---|---|
truncate | overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; |
text-ellipsis | text-overflow: ellipsis; |
text-clip | text-overflow: clip; |
示例(Examples)
¥Examples
截断文本(Truncating text)
¥Truncating text
使用 truncate 工具防止文本换行，并在需要时使用省略号 (…) 截断溢出文本：
¥Use the truncate utility to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed:
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>添加省略号(Adding an ellipsis)
¥Adding an ellipsis
如果需要，使用 text-ellipsis 工具用省略号 (…) 截断溢出文本：
¥Use the text-ellipsis utility to truncate overflowing text with an ellipsis (…) if needed:
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>剪切文本(Clipping text)
¥Clipping text
使用 text-clip 工具在内容区域限制处截断文本：
¥Use the text-clip utility to truncate the text at the limit of the content area:
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>这是默认的浏览器行为。
¥This is the default browser behavior.
响应式设计(Responsive design)
¥Responsive design
在 text-overflow 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<p class="text-ellipsis md:text-clip ..."> <!-- ... --></p>请参阅 变体文档 详细了解如何使用变体。