はみ出す文字列を三点リーダーにする方法

領域をはみ出したときに三点リーダー(…)にする方法を紹介します。

既出かと思いますが、詳しい内容とかあまり見つからない（こうやればできるというのは見つかる）ので、私なりに調べた内容を載せます。

領域をはみ出したときに三点リーダー(…)にする場合は以下のように設定します。

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

spanタグのclassにellipsisを設定した場合、はみ出した部分を三点リーダーにします。

spanタグが対象なのは特に意味はないです。強いて言うならellipsisの使い方をわかりやすくするためです。

※ このスタイルでは複数行の対応はできません。

overflow:hiddenについて

領域をはみ出した際に、はみ出したものを表示しないようにします。

scrollとか、autoにするとスクロールバーが出るやつです。

余談ですが、最近はscrollとかautoは使わなくてperfect-scrollbar.jsというのを使ってます。

white-space:nowrapについて

空白文字の扱いを決めています。

nowrapを指定すると、一行で表示されます。

preでもできると思いますが、改行やタブが残るのでうまくいかない場合があると思います。

こちらのページがわかりやすいと思います。

https://developer.mozilla.org/ja/docs/Web/CSS/white-space

text-overflow: ellipsisについて

はみ出した部分を三点リーダーにします。

おまけ

youtubeのサイドバーを見てみると、同じようなことをやってるのがわかります。

さらに、右側に24pxの余白をいれて、見やすくするというテクニックを発見できます。

24pxというのは1.5rem(1rem=16pxのとき)なので何か意味があるのだと思います。

なんの意味があるのかはわからないです。

margin-right: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.4rem;
font-weight: 400;
line-height: 2.1rem;
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;