字体排印
用于将文本限制在特定行数的实用工具。
| 类名 | 样式 |
|---|---|
line-clamp-<number> | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <number>; |
line-clamp-none | overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset; |
line-clamp-(<custom-property>) | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(<custom-property>); |
line-clamp-[<value>] | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <value>; |
使用 line-clamp-<number> 实用工具（如 line-clamp-2 和 line-clamp-3）来截断多行文本，使其在特定行数后显示省略号
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.
Lindsay Walton<article> <time>Mar 10, 2020</time> <h2>Boost your conversion rate</h2> <p class="line-clamp-3"> Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim. </p> <div> <img src="/img/lindsay.jpg" /> Lindsay Walton </div></article>使用 line-clamp-none 撤销之前应用的行数限制实用工具
<p class="line-clamp-3 lg:line-clamp-none"> <!-- ... --></p>使用 line-clamp-[<value>] 语法 来设置行数基于完全自定义的值
<p class="line-clamp-[calc(var(--characters)/100)] ..."> Lorem ipsum dolor sit amet...</p>对于 CSS 变量，您还可以使用 line-clamp-(<custom-property>) 语法
<p class="line-clamp-(--my-line-count) ..."> Lorem ipsum dolor sit amet...</p>这只是一个简写形式，用于 line-clamp-[var(<custom-property>)] 它会自动为您添加 var() 函数。
前缀a line-clamp 实用工具 使用断点变体（如 md:）来仅在中等 屏幕尺寸及以上时应用该实用工具
<div class="line-clamp-3 md:line-clamp-4 ..."> <!-- ... --></div>了解更多关于在变体文档中使用变体的信息。