text-overflow の使い方 [CSS]

text-overflow の使い方

overflow: hidden; で省略時に三点リーダーを表示する

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

display: block; もしくは display: inline-block; に、width もしくは max-width の指定が必要。(※ inline 要素は幅指定が効かない)

参考：

CSSではみ出した文字を省略する「text-overflow: ellipsis;」がいつの間にかPCでも使えるようになってた！ – tacamy--log

CSSのtext-overflowではみ出したテキストを「…」表示 – webdev

text-overflow – CSS: カスケーディングスタイルシート | MDN

text-overflow – CSS: Cascading Style Sheets | MDN

CSS text-overflow property | W3Schools

text-overflow | CSS-Tricks

html – Overflow:hidden dots at the end – Stack Overflow

text-overflow | Can I use…

複数行に対応する方法

参考：

複数行にも対応 長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ – PSYENCE:MEDIA

複数行でも3点リーダーをきかせる – Qiita

複数行でも text-overflow: ellipsis したい時のCSSメモ – Qiita

Clamping lines without ‘-webkit-line-clamp’ – Stack Overflow

三点リーダーの色

参考： 

CSS で指定した長さ以上のテキストを「…」で省略する | ハックノート

Set dot color of `text-overflow: ellipsis` – Stack Overflow

flexbox

参考：

block要素の子要素でtext-overflow:ellipsisを適用させるものとさせないものを使いたい｜teratail