Lzh on GitHub

line-clamp

用于将文本限制为特定行数的工具。

快速参考

类别样式
line-clamp-<number>overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: <number>;
line-clamp-noneoverflow: 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，可以在特定行数后截断多行文本：

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 
<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() 函数。

响应式设计

在 line-clamp 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

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

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