使用 @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">  这是一个博客文章的文本块，并不像您最初设计的那样方便地只有三行长。根据您的布局方式，它在移动设备上可能有 6 行，甚至在桌面设备上也是如此。这真是个大麻烦，不是您期望在周五下午 4:45 还在浪费时间处理的事情，对吧？您有摔角比赛的门票，听说在比赛开始前会有一场本地选手的暗战，如果您不早点到场就会错过。</p>

有关更多详细信息，请查看 GitHub 仓库上的文档。