CSS3で複数行テキストを省略記号（…）で表示する方法【2行以上のellipsis対応】

複数行テキストの省略記号（…）表示、できていますか？

Webサイトやブログ記事の一覧などで、長いテキストを2行や3行で「…（三点リーダー）」に省略したいシーン、よくありますよね。
従来のtext-overflow: ellipsis;は1行だけに対応ですが、CSS3の新しい書き方なら、複数行でもきれいに省略記号がつけられます。

実装例：2行で省略するCSS

div {
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* ここが行数指定！ */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

コード解説

• display: -webkit-box; と -webkit-box-orient: vertical; で、ボックスを縦方向に制御
• -webkit-line-clamp: 2; で2行まで表示（行数は任意で変更可能）
• overflow: hidden; と text-overflow: ellipsis; であふれた部分を「…」で省略

複数行ellipsis対応のメリット

• ニュースやブログ一覧、カードUI、カラム型レイアウトなどに最適
• ユーザー体験（UX）が向上
• デザインの統一感が保てる
• コピペだけで実装可能！

注意点・補足

• この書き方はWebkit系ブラウザ（Chrome、Safari等）で安定動作します。
  FirefoxやIEでは未対応のため、代替案（JSや他CSS）を検討しましょう。
• レスポンシブ対応時、文字サイズや行数によってはデザインが崩れないよう調整を。

まとめ

CSS3の-webkit-line-clampを使えば、2行や3行など複数行テキストも「…」でスマートに省略表示できます。

フロントエンド開発やUIデザインの現場で、ぜひ活用してみてください！