数週間前に、テキストを特定の行数で省略するための公式 Tailwind CSS プラグインである @tailwindcss/line-clamp をリリースしました。
あなたが Figma であなた自身またはチームの誰かが丁寧に作成した美しいデザインを実装していると想像してください。各ブレークポイントですべての異なるレイアウトを完璧にこなし、空白とタイポグラフィを完璧にし、使用している写真がデザインを本当に生き生きとさせています。
それは完全に素晴らしい見た目です — 実際のプロダクションコンテンツに接続して、美しいブログカードのグリッドが崩壊することに気づくまでは。もちろん、実際の記事の抜粋はすべて魔法のように正確に3行の長さではなく、今では各カードの高さが異なっているからです。
聞き覚えがありますか？ もしそうなら、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 リポジトリの ドキュメントを確認してください。