今回は文章が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％には影響がありますので、あらかじめご承知くださいませませ。
それではみなさんも使ってみてくださいね！