使用 @tailwindcss/line-clamp 实现多行截断

几周前，我们发布了 @tailwindcss/line-clamp，这是一个用于将文本截断到特定行数的官方 Tailwind CSS 插件。

想象一下，您正在实现一个您或您的团队成员在 Figma 中精心设计的漂亮设计。您已经确定了每个断点的不同布局，完善了空白和排版，并且您使用的摄影作品真正让设计栩栩如生。

它看起来非常棒——直到您将它连接到实际的生产内容，并意识到您漂亮的博客卡片网格崩溃了，因为当然，真实的文章摘录并不都是神奇地恰好只有三行长，现在每个卡片的高度都不一样。

听起来熟悉吗？如果是这样，line-clamp 插件可以拯救您。

首先，安装插件并将其添加到您的 tailwind.config.js 文件中

npm install @tailwindcss/line-clamp

module.exports = {
  // ...
  plugins: [
    // ...
    require('@tailwindcss/line-clamp'),
  ],
}

然后您需要做的就是将 line-clamp-{n} 实用程序添加到任何文本块中，以自动截断到 n 行，并在末尾添加省略号

<p class="line-clamp-3">
  Here's a block of text from a blog post that isn't conveniently three lines long like you designed
  for originally. It's probably like 6 lines on mobile or even on desktop depending on how you have
  things laid out. Truly a big pain in the derriere, and not the sort of thing you expected to be
  wasting your time trying to deal with at 4:45pm on a Friday am I right? You've got tickets to
  SmackDown and you heard there's gonna be a dark match with that local guy from two towns over that
  your cousin went to high school with before the show starts, and you're gonna miss it if you're
  not there early.
</p>

有关更多详细信息，请查看 GitHub 存储库中的文档。