幾週前，我們發佈了 @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 儲存庫上的文件。