CSSでテキストの末尾を「…」にして文章を1行にまるめる方法

テキストは表示するけれど、さほど重要じゃないために全文表示しなくて良い場面で、文章の1行にして末尾を「…」と表示したい時ってありますよね。

CSS3ならたった3行で簡単に実装できるので、具体的に方法をご紹介します。

やりたいこと

こちらは当サイトのパンくずリストです。テキストが長くなると、右にはみ出してしまうのが難点です。この場合も末尾の「ウ」の途中で切れてしまって気持ち悪いですよね。

これをこんなふうに丸められたら綺麗ですね。

このように、末尾を「…」にして文章を丸められるようにしたいと思います。

結論

.container {
    /* 改行しないで1行になるようにする */
    white-space: nowrap;

    /* はみ出し部分を隠す */
    overflow: hidden;

    /* テキストの末尾を「...」に変更する */
    text-overflow: ellipsis;
}

この3行だけでいけちゃうので便利です。CSS3なのでブラウザ対応状況はどうかというと。。。

ブラウザ対応

Can I use

2020年4月時点で全ブラウザ対応されています。

これならブラウザによる表示の違いも心配なく安心して使えますね。