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

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

¥A few weeks back we released @tailwindcss/line-clamp, an official Tailwind CSS plugin for truncating text to a specific number of lines.

想象一下，你或你的团队成员正在 Figma 中精心实现一个精美的设计。你在每个断点处都完美地完成了所有不同的布局，完善了留白和排版，而你使用的摄影作品也让设计栩栩如生。

¥Imagine you're implementing a beautiful design you or someone on your team carefully crafted in Figma. You've nailed all the different layouts at each breakpoint, perfected the whitespace and typography, and the photography you're using is really bringing the design to life.

它看起来非常棒 - 直到你把它连接到你的实际生产内容中，你才意识到你漂亮的博客卡片网格会散架，因为当然，真正的文章摘录不会神奇地正好是三行长，而且现在每张卡片的高度都不一样。

¥It looks totally amazing — until you connect it your actual production content and realize that your beautiful grid of blog cards falls apart because, of course, real article excerpts aren't all magically exactly three lines long, and now each card is a different height.

听起来熟悉吗？如果是这样，line-clamp 插件可以帮你一把。

¥Sound familiar? If so, the line-clamp plugin is here to save your bacon.

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

¥First, install the plugin and add it to your tailwind.config.js file:

npm install @tailwindcss/line-clamp

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

然后你只需将 line-clamp-{n} 实用程序添加到任何文本块中，即可自动将其截断为 n 行，并在末尾添加省略号：

¥Then all you need to do is add a line-clamp-{n} utility to any block of text to automatically truncate to n lines with a trailing ellipsis:

<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 存储库上的 查看文档。

¥For more details, check out the documentation over on the GitHub repository.