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

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

想象一下，你正在实现一个漂亮的设计，这个设计是你或你团队中的某人精心在 Figma 中制作的。你已经在每个断点上完美地调整了不同的布局，完善了空白和排版，你使用的摄影作品真的为设计增添了生机。

它看起来非常惊人——直到你将其连接到实际的生产内容时，才意识到你漂亮的博客卡片网格分崩离析，因为当然，真实的 文章摘录并不是 magically 刚好都是三行长，而现在每个卡片的高度都不同。

听起来熟悉吗？如果是这样，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">
  这里是一段来自博客文章的文本，它并没有方便地限制为三行，像你最初设计的那样。它在手机上可能有 6 行，甚至在桌面上也因你的布局而异。真是个大麻烦，这种事你可不希望在周五下午 4:45 时浪费时间去处理，对吧？你有票去看 SmackDown，你听说在表演开始之前会有那位来自两个城镇之外的当地选手的暗赛，你表弟和他是高中同学，如果你不早点到就要错过了。
</p>

有关更多信息，请 查看文档 ，可在 GitHub 仓库上找到。