📰
【CSS】文章の行数を制限＆語尾を3点リーダーにする
記事の一覧ページなどで、文章の行数を制限したいときの実装方法。
JSを使うという手もありますが、CSSのみで実装できる、一番シンプルな書き方をご紹介します。
書き方は2種類。
結果
まずは最終イメージから。
解説① text-overflow: ellipsis;
「ellipsis」＝省略記号という意味です。
以下のように設定することで、どんなに文章が長くても、1行に収まってくれます。
複数行の設定はできません。
.text1 {
white-space: nowrap; /* 折り返し無しにする */
overflow: hidden; /* はみ出た部分を非表示 */
text-overflow: ellipsis; /* 語尾を3点リーダーに */
}
解説② -webkit-line-clamp
「-webkit-line-clamp」は行数を制限することが出来ます。
ただし使用するには、以下の設定が必須です。
-
displayは-webkit-boxもしくは-webkit-inline-boxであること -
box-orientはverticalあること
.text2 {
display: -webkit-box; /* 必須 */
-webkit-box-orient: vertical; /* 必須 */
-webkit-line-clamp: 3; /* 行数を制限 */
overflow: hidden; /* はみ出た部分を非表示 */
}
さいごに
ご覧いただきありがとうございました。
使う頻度高めなので、いつでも参照できるように、ご自身でもコードや情報をまとめておくことをお勧めします！
Twitterで質問受け付けておりますので、分からないことがあればDMください！
参考
Discussion