Line Clamp 线夹

将文本限制在特定行数的实用工具。

Class	Properties

基本用法

截断多行文本

使用 line-clamp-* 实用工具在特定行数后截断一块文本。

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

<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="..." />
    Lindsay Walton
  </div>
</article>

取消行夹紧

使用 line-clamp-none 来取消先前应用的行夹紧实用程序。

<p class="line-clamp-3 lg:line-clamp-none">
  <!-- ... -->
</p>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:line-clamp-4 仅在悬停时应用 line-clamp-4 实用程序。

<p class="line-clamp-3 hover:line-clamp-4">
  <!-- ... -->
</p>

有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:line-clamp-4 仅在中等屏幕尺寸及以上应用 line-clamp-4 实用程序。

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

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。

使用自定义值

定制您的主题

默认情况下，Tailwind 提供了六个 line-clamp 实用工具。您可以通过编辑您的 tailwind.config.js 文件中的 theme.lineClamp 或 theme.extend.lineClamp 来自定义这些值。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      lineClamp: {		
        7: '7',			
      },				
    }
  }
}

有关自定义默认主题的更多信息，请参阅主题自定义文档。

任意值

如果您需要使用一个与主题无关的 line-clamp 值，可以使用方括号来根据任意值动态生成属性。

<p class="line-clamp-[7]">
  <!-- ... -->
</p>

有关任意值支持的更多信息，请参阅任意值文档。