使用 @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.