几周前，我们发布了 @tailwindcss/line-clamp，这是一个官方的 Tailwind CSS 插件，用于将文本截断到特定行数。
想象一下，您正在实现一个您或您的团队成员在 Figma 中精心设计的精美设计。您已经掌握了每个断点上的所有不同布局，完善了空白和排版，并且您使用的摄影作品真正地使设计栩栩如生。
它看起来非常棒 - 直到您将其连接到实际的生产内容，并意识到您漂亮的博客卡片网格崩溃了，因为，当然，*真正*的文章摘要并非都神奇地正好三行长，现在每张卡片的高度都不同。
听起来熟悉吗？如果是这样，line-clamp 插件可以帮助您摆脱困境。
首先，安装插件并将其添加到您的 tailwind.config.js 文件中
npm install @tailwindcss/line-clampmodule.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 存储库上的文档。