ブログを作成していると、「タイトルが長すぎてデザインが崩れる」「3行目以降は非表示にして『…』で省略したい」という場面によく遭遇しますよね。
今回は、2026年現在、最も推奨される「line-clamp」を使った実装方法を解説します。
1. 【結論】これをコピペしてください！
特定の行数でテキストを切り取り、末尾に「…（三点リーダー）」を自動で付与するコードがこちらです。
.text {
display: -webkit-box;
-webkit-line-clamp: 3; /* 表示したい行数を指定 */
-webkit-box-orient: vertical;
overflow: hidden;
}2. なぜ「-webkit-」がついているの？（読み飛ばしてOK）
「まだプレフィックス(-webkit-)が必要なの？」と思う方もいるかもしれません。
実は、この line-clamp プロパティは長らく「草案」段階でしたが、非常に便利だったため、先行してWebKit（ChromeやSafari）に実装されました。その後、標準仕様に採用されることになりました。
現在、主要なブラウザは標準のline-clamp プロパティへの移行を進めていますが、互換性を保つために、この -webkit- 付きのが広く使われています。
3. 実装時の注意点とTips
① インライン要素には効かない
この指定は、<div>や<p> などのブロックレベル要素に適用してください。<span>などに直接書いても反映されないので注意しましょう。
② paddingに注意
要素に上下のpaddingがあると、隠したはずの次の行がチラ見えしてしまうことがあります。行数を制限する場合は、なるべく要素自体の高さ（height）を固定せず、ブラウザに計算させるのがスマートです。
まとめ
CSSの line-clampを使えば、レスポンシブデザインで横幅が変わっても、自動で最適な位置で省略してくれます。
スッキリとした読みやすいUIを目指して、ぜひ活用してみてくださいね。
