今回は文章が3行以上になる場合に、ブログなどの一覧で表示している文章の2行目の文末に3点リーダーをＣＳＳで表示する方法を紹介します。

WordPressなどであればPHPで対応できますが
すぐみのHTMLなどの場合はこの方法だともろもろ調整がしやすくて
すごくおすすめの方法です。

CSSのみだと3点リーダーは必ず1行目に表示されていたので
このやり方知っているとここで苦労しなくて済みますね。
JSなどで調整もしなくてよいし。

p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

それぞれ解説していきます。

display: -webkit-box;

display属性を”box”に指定します。
こうすることでフレキシブルボックス状態になります。

-webkit-box-orient: vertical;

box-orientは上記で指定したフレキシブルボックスの並び方向をverticalと指定しておいてください。

-webkit-line-clamp: 3;

-webkit-line-clampで指定した行までを表示します。
ここを2にすれば2行のみ表示されます。

overflow: hidden;

単純にスクロールバー対策です。
しておいたほうが安牌でしょうね。

ただ、ちなみにこの方法はcaniuseの範囲的に
以下の形になっています。

【URL】Can I Use

そのため、大体91％程度のユーザーにはなんの影響もありませんが
残りの9％には影響がありますので、あらかじめご承知くださいませませ。

それではみなさんも使ってみてくださいね！

• code,
• css3,
• web