CSS

CSSだけで長いテキストを「…」で省略する方法

CMSなどで、本文やタイトルを高さの決まった一に配置するとき、テキストが長くて省略したいときがありますよね。
JSやそもそも吐き出すPHPでなどで文字数制限をするのもいいですが、IEがそろそろ滅びる今、CSSだけで実装できるので紹介しようと思います。

 

CSSだけで長いテキストを「…」で省略する方法

では、早速CSSだけで長いテキストを省略していきましょう!
今回メインで使用するCSSはこちら。

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

 

 

1行のテキストを「…」で省略する

100pxを超えてはみ出た文はすべて省略され、「テキストが入ります。テキ…」のようになります。

<HTML>

<p class="text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

 

<CSS>

p {
    width: 100px;
}

.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

 

 

複数行のテキストを「…」で省略する

「-webkit-line-clamp」で省略したい行数を指定します。
4行にしたい場合は、「-webkit-line-clamp: 4;」

100pxを超えてはみ出た文はすべて省略され、
「テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります…」のようになります。

<HTML>

<p class="text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

 

<CSS>

p {
    width: 100px;
}

.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

 

CSSだけで実装できるのはめっちゃ楽で良いですね。

 

 

web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。
web制作で独学で稼ぎたいという人必見!
RELATED POST

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)