Typography
text-overflow
用于控制元素中文本溢出的工具类
| Class | Styles |
|---|---|
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>这是默认的浏览器行为。
响应式设计
Prefix a text-overflow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="text-ellipsis md:text-clip ..."> <!-- ... --></p>Learn more about using variants in the variants documentation.
