ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2020.11.30  最終更新日:2021.06.23

CSS

【文字切り】長すぎるテキストに3点リーダーをつけて省略する方法

記事の一覧を表示させるときなど、本文を全部表示させず、最初の少しの部分だけ表示させ3点リーダーをつける方法のメモです。

1行で3点リーダーをつける方法

CSS

p {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

見え方のサンプル

見え方は以下のようになります。

これは3点リーダーのサンプルです。

この文章は3点リーダーを確認するための文章です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ

ブラウザのサイズを大きくしたり小さくしたりしてみて、最後に3点リーダーが表示されることを確認してみてください。

複数行で3点リーダーをつける方法

CSS

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

見え方のサンプル

見え方は以下のようになります。
-webkit-line-clamp:2; の部分の数字が表示したい行数です。
今回は『2』としているので、2行表示され、2行目の最後に3点リーダーが表示されます。

これは3点リーダーのサンプルです。

この文章は3点リーダーを確認するための文章です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ

最新記事