CSSで文字数（行数）を制限して末尾を3点リーダーにする方法

Webデザインをしていると、長すぎる文章を途中から省略したいという場面がよくあるかと思います。

実は、CSSを書くだけで文字数（行数）を制限して末尾を3点リーダーにすることができるんです。

本記事では、そのCSSの書き方をサンプルコードを交えながら解説します。

実際にコードを書いてみて検証してみました。

思ったより簡単に実装できましたので、本記事を読んで皆さんもCSSを書いてみてください。

ゴロー

それでは始めましょう！

制限前と後の比較

まずは、文字数を制限する前と後でどのように変化するかみてみましょう。

文字数（行数）制限していない状態

上記の文言の文字数（行数）制限してみるとどうなるかみてみます。

文字数（行数）制限後

文字数（行数）を制限すると上記のようにすることができます。

行数が3行までに制限されて、3行目以降の文字は省略されています。

さらに文章の末尾に3点リーダー（…）が追加されています。

このような形が完成することを目指します。

サンプルコード

では実際にコードをみていきましょう。

HTML

まずはHTMLからです。

<div>
株式会社サンプルは、1980年に設立されました。創業以来、私たちはお客様のニーズに応えることを第一に考え、革新的な製品とサービスを提供してまいりま   した。品質の高さと信頼性で業界内外から高い評価を受けております。私たちのミッションは、「人々の生活を豊かにすること」です。そのために、最先端の技術を活用し、環境にも配慮した製品開発を行っています。多様な製品ラインアップを揃え、各市場に適したソリューションを提供しております。また、私たちは持続可能な社会の実現を目指し、環境保護活動にも積極的に取り組んでいます。社内でのエネルギー効率向上やリサイクル活動に加え、地域社会との協力を通じて、環境に優しい企業活動を推進しています。お客様、パートナー企業、そして従業員との信頼関係を大切にし、共に成長し続けることが私たちのビジョンです。これからも株式会社サンプルは、革新と挑戦を続け、未来に向けた新たな価値を創造してまいります。
 </div>

div・pなどのタグの間に省略前の文章全文を記載します。

CSS

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

必要な記述は上記のみです。

重要なのは黄色下線の部分です。

下記3行については、このままコピペで大丈夫です。

display: -webkit-box;

-webkit-box-orient: vertical;

overflow: hidden;

残りの1行については、カスタマイズが必要になります。

-webkit-line-clamp: 3;とあります。この3というのは、3行目の端以降の文言を省略するということです。

例えば、文章が4行や5行目まであれば、3行目の最後の文字以降が省略されて末尾に3点リーダーがつきます。

上記の数字を好きなように変更して試してみてください。

参考サイト

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

まとめ

今回は、CSSで文字数（行数）を制限して末尾を3点リーダーにする方法について解説しました。

意外と簡単に書くことができたのではないでしょうか。

ではまたノシ