テキストの行数制限・省略 デモ

1行で省略（text-overflow）

これは1行で省略されるテスト文章です。この後に続く長い文章は表示されず、CSSのプロパティによって最後が三点リーダーに置き換わります。レスポンシブ対応でも崩れません。

2行で省略（line-clamp）

これは2行で省略されるテスト文章です。ブログのカード型レイアウトの抜粋文などで最もよく使われるパターンです。文字量が多い場合でも、2行目の最後で綺麗に三点リーダーになります。

3行で省略（line-clamp）

これは3行で省略されるテスト文章です。ニュースサイトの説明文などで、もう少し情報を多く見せたい場合に使用されます。指定する行数の数字を変えるだけで、どんな行数にも対応できるのがこのプロパティの素晴らしいところです。