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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です