戦え、エンジニア諸君！！
ブログカードや一覧リストで “本文がはみ出して崩れる” 問題―― 昔は substr() や jQuery プラグイン、果ては CMS 側で文字数カットしていた。 だがそれでは
・改行／絵文字で文字幅が狂う
・翻訳切り替えで行数がズレる
・デザイン変更のたびに PHP・JS を修正…
そんな惨劇は 2025 年で終わりだ！
CSS だけで“行数ベース + …（エリプシス）”を実現し、デザインの美しさと保守性を同時に掴み取れッ！！
Contents
⚡ 1. 現代最適解：-webkit-line-clamp 一発
.clamp-4{
display: -webkit-box; /* Flex 縦箱 */
-webkit-line-clamp: 4; /* 4 行目以降をカット */
-webkit-box-orient: vertical;
overflow: hidden; /* 超過分を隠す */
}- 2023 以降の Chrome / Safari / Firefox / Edge で安定
- HTML 改修ゼロ・JS 不要・レスポンシブ幅も崩れない
- ユーザーのフォントサイズ変更にも追随
例：ブログカードの本文だけ class="clamp-4" を付けるだけで終了。
実装イメージ
🛠 2. フォールバック：古い Safari 向け “高さカット”
旧 iOS12 Safari など line-clamp 非対応環境が 1〜2％ 残る。 そこだけは行高 × 行数で max-height を切る簡易手法を用意。
.fallback-4{
max-height: calc(1.6em * 4); /* line-height × 行数 */
overflow: hidden; position: relative;
}
.fallback-4::after{
content:"…"; position:absolute; bottom:0; right:0; padding-left:.3em;
background:linear-gradient(to right,transparent 0 30%,#fff 70%);
}対象ブラウザを @supports (-webkit-line-clamp:1) で分岐すれば OK。
🙅♂️ 3. もう戻らない！ 従来手法のデメリット
| 従来手法 | 問題点 |
|---|---|
substr() / mb_substr() （PHP・JS） | 改行・絵文字で文字幅が狂う／多言語で破綻 |
| jQuery プラグイン | 依存ライブラリ増 → 表示フラッシュ(FOUC)／保守コスト |
| CMS投稿画面で文字数制限 | デザインチェンジのたびに数値を再調整…地獄 |
CSS 行数カットなら一括で制御、そしてデザイン変更も class を差し替えるだけ！
👑 4. 団長Tips ― 変数で“行数ポリシー”を統一
:root{
--excerpt-lines: 4;
}
.excerpt{ /* 全カードが共通で4行カット */
display:-webkit-box;
-webkit-line-clamp: var(--excerpt-lines);
-webkit-box-orient:vertical;
overflow:hidden;
}デザイナー変更 → 行数を 3 に変えたい？ :root{ --excerpt-lines:3 } をビルドパイプラインで置換するだけ。 PHP・JS・CMS側を一切触らずレイアウトを揃えられる！
📚 さらなる高みへ ─ 団長推薦の学び
CSSシークレット ─ 47のテクニックで CSS をもっと強力に
擬似要素 + グラデで“ありえないUI”を作るネタ帳。テキストトリミング応用も満載！
Amazonで見る
※リンクはアフィリエイトを含みます。
📝 まとめ
- line-clamp が 2025 年の正解。JS も CMS サブストリングも卒業せよ！
- レガシー Safari は高さカットでフォールバック。
- 行数は CSS 変数で一元管理 → デザイン変更に強い。
🔥 団長の喝──はみ出し文字の亡霊を成敗せよ！
コードを削り、CSS を磨き、UI を美しく保つ者が
読者の滞在時間とCTRを支配する。
今すぐ .excerpt{ -webkit-line-clamp:4; } をコミットし、
戦え、エンジニア諸君ッ！余白まで美しいレイアウトで世界を魅了せよッ！！🔥🔥🔥