カード一覧の本文抜粋を「2行で切って … を出したい」と思って line-clamp-2 を付けたのに、3行目がはみ出したり、まったく効かなかったり——そんな経験はありませんか？ クラス名は合っているのに省略されない。でもコードは間違っていないように見える。実はこれ、多くの場合 line-clamp そのものではなく、隣に付けた padding が原因です。
この記事では、Tailwind CSS の line-clamp が「効かない」ときの原因を逆引きで整理し、正しい行数省略の書き方を解説します。まず結論から。行数を付けるだけでよく、余白（padding）は line-clamp を当てた要素の外側に出すのが基本です。
<!-- ✕ 効かない: line-clamp と padding を同じ要素に付けている -->
<p class="line-clamp-2 p-4">長い本文がここに入る……</p>
<!-- ○ 直る: padding は親、line-clamp は内側の要素に分ける -->
<div class="p-4">
<p class="line-clamp-2">長い本文がここに入る……</p>
</div>「なぜ padding で崩れるのか」「他にどんな原因があるのか」を、順を追って見ていきましょう。
line-clampの基本：もうプラグインは要らない
まず前提から。指定した行数でテキストを切って末尾に … を付けたいときは、line-clamp-2 のように 行数を付けるだけです。1〜6 まで標準で用意されていて、line-clamp-none で解除できます。
<p class="line-clamp-2">
カード一覧の本文抜粋など、長くなりがちなテキストを2行で打ち切って
末尾に三点リーダーを付けたいときに使います。
</p>ここで古い記事を見て @tailwindcss/line-clamp プラグインを入れようとした方は要注意です。Tailwind CSS v3.3 以降、line-clamp はフレームワーク本体に標準搭載され、このプラグインは不要になりました。むしろ入れっぱなしだと将来の移行で邪魔になるので、まだ導入している場合は外してしまって問題ありません。
「効かない」原因の逆引き
クラス名が正しいのに省略されない・はみ出すときは、次の4つのどれかに当てはまることがほとんどです。上から順に多い順で並べています。
① 同じ要素に padding を当てている（最頻出）
これが圧倒的に多いパターンです。line-clamp は内部で overflow: hidden と -webkit-box を使って余分な行を隠します。ところが line-clamp を当てた要素自身に上下の padding（py-4 など）があると、隠したはずのテキストが padding 領域ににじみ出て、3行目・4行目が見えてしまいます。
テキスト自体が消えているわけではなく、切り取り線の外側に padding のぶんの余白ができて、そこから中身が漏れているイメージです。直し方はシンプルで、padding は親要素に持たせ、line-clamp は余白のない内側の要素に当てるだけです。
<!-- カードUIのよくある構成。padding は外側の div に寄せる -->
<article class="rounded-lg border p-4">
<h3 class="font-bold">記事タイトル</h3>
<p class="mt-2 line-clamp-3 text-gray-600">
本文の抜粋。ここは3行で打ち切って三点リーダーを出す。
padding を持つのは親の article 側なので漏れない。
</p>
</article>② displayを上書きするクラスを併用している
line-clamp は display: -webkit-box に依存して動きます。そのため 同じ要素に flex や grid、block など display を変えるクラスを併用すると、-webkit-box が上書きされて効かなくなります。レイアウトのために flex を使いたいときは、flex は親コンテナに当て、テキストの省略は子要素側で行うと衝突しません。
③ 高さ固定（h-*）と併用して中途半端に切れる
h-20 のように高さを固定した上で line-clamp を使うと、行数の指定と高さがぶつかって、文字が行の途中で切れたり … が出なかったりします。行数で高さをコントロールしたいなら固定 h-* は外すのが基本です。カードの高さを揃えたい場合は、高さそのものではなく行数（line-clamp-3 など）で揃えると崩れません。
④ 1行だけの省略に line-clamp を使っている
「1行で収まらなければ … にしたい」だけなら、line-clamp ではなく truncate が正解です。truncate は単一行の省略に特化していて、-webkit-box を使わないぶんハマりどころが少なくなります。複数行なら line-clamp-2 以上、1行なら truncate、と使い分けを覚えておくと迷いません。
line-clampが生成するCSSを1枚で理解する
なぜ padding や display で崩れるのかは、生成される CSS を見ると腑に落ちます。line-clamp-2 は次のような CSS に展開されます。
/* line-clamp-2 が生成する CSS */
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}ポイントは display: -webkit-box と overflow: hidden の2つです。-webkit-box を別の display で上書きすれば行数指定が無効になる（原因②）し、overflow: hidden の切り取り基準は要素の padding の内側なので、padding があるとそのぶん見える範囲が広がる（原因①）——という理屈です。仕組みを1枚で押さえておくと、初見のバグでも切り分けが速くなります。
v4での新機能：任意行数とCSS変数
標準の 1〜6 で足りないときは、Tailwind CSS v4 の任意値（arbitrary value）が使えます。角カッコで好きな行数を指定できます。
<!-- 8行で省略したい -->
<p class="line-clamp-[8]">……</p>
<!-- CSS変数で動的に行数を変える（ショートハンド記法） -->
<p class="line-clamp-(--teaser-lines)">……</p>line-clamp-(--teaser-lines) は line-clamp-[var(--teaser-lines)] のショートハンドで、var() を自動で補ってくれます。CSS変数側で行数を切り替えれば、画面幅や状態に応じて省略する行数を動的に変えられます。もちろん line-clamp-none でいつでも省略を解除できるので、「もっと見る」ボタンで全文表示に切り替える、といった実装とも相性が良いです。
まとめ：line-clampが効かないときのチェックリスト
Tailwind CSS で line-clamp が効かない・はみ出すときは、次の順で確認してみてください。
- line-clamp を当てた同じ要素に
padding（py-*など）を付けていないか？ → padding は親に出す - 同じ要素に
flex/grid/blockなど display を変えるクラスを併用していないか？ - 高さ固定
h-*と併用していないか？ → 高さは行数で揃える - 1行だけの省略なら
line-clampではなくtruncateを使う - 古い
@tailwindcss/line-clampプラグインを入れっぱなしにしていないか？（v3.3 以降は不要）
「クラスは正しいのに効かない」という理不尽の正体は、たいてい padding か display の併用です。仕組み（-webkit-box と overflow: hidden）さえ掴めば切り分けは一瞬なので、慌てず1つずつ潰していきましょう。同じ「効かない」系ではTailwind CSSでhoverが効かない原因と対処もハマりどころが近いので、あわせて読むと切り分けの勘所がつかめます。Tailwind の基本を一度おさらいしたい方はTailwind CSSの使い方【初心者向け】、カード内の要素をまとめてホバーさせたいときはTailwind CSSのgroup-hover完全解説も参考にしてください。
スポンサーリンク
