line-clamp

用于将文本截断为指定行数的工具类。

快速参考

类	属性
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-2 和 line-clamp-3 等 line-clamp-<number> 工具类，在指定行数后截断多行文本：

Mar 10, 2020

Boost your conversion rate

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

<!-- [!code classes:line-clamp-3] -->
<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 取消之前应用的行数截断工具类：

<!-- [!code classes:lg: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() 函数。

响应式设计

使用 md: 等断点变体前缀，即可让 line-clamp 工具类仅在中等及以上屏幕尺寸下生效：

<div class="line-clamp-3 md:line-clamp-4 ...">
 <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。