排版
用于控制元素文本溢出效果的工具类。
Class | Styles |
---|---|
truncate | overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; |
text-ellipsis | text-overflow: ellipsis; |
text-clip | text-overflow: clip; |
使用 truncate
工具类以防止文本换行,并在需要时用省略号 (…) 来截断溢出的文本:
英语主要词典中最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis, 这个词指的是一种由于 吸入非常细的硅酸盐颗粒(特别是来自火山)而引发的肺部疾病;在医学上,它与硅肺病是相同的。
<p class="truncate">英语主要词典中最长的单词是...</p>
使用 text-ellipsis
工具类在需要时用省略号 (…) 来截断溢出的文本:
英语主要词典中最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis, 这个词指的是一种由于 吸入非常细的硅酸盐颗粒(特别是来自火山)而引发的肺部疾病;在医学上,它与硅肺病是相同的。
<p class="overflow-hidden text-ellipsis">英语主要词典中最长的单词是...</p>
使用 text-clip
工具类在内容区域的边界处截断文本:
英语主要词典中最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis, 这个词指的是一种由于 吸入非常细的硅酸盐颗粒(特别是来自火山)而引发的肺部疾病;在医学上,它与硅肺病是相同的。
<p class="overflow-hidden text-clip">英语主要词典中最长的单词是...</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 ..."> Lorem ipsum dolor sit amet...</p>
Learn more about using variants in the variants documentation.