📰

【CSS】文章の行数を制限&語尾を3点リーダーにする

2022/05/31に公開約1,000字

記事の一覧ページなどで、文章の行数を制限したいときの実装方法。
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-orientverticalあること
.text2 {
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 3; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}

さいごに

ご覧いただきありがとうございました。
使う頻度高めなので、いつでも参照できるように、ご自身でもコードや情報をまとめておくことをお勧めします!

Twitterで質問受け付けておりますので、分からないことがあればDMください!

https://twitter.com/yurippe_dev

参考

https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

Discussion

ログインするとコメントできます