【CSS】幅を超えた文字列を省略表示する方法

テーブルの列幅を超えるような文字列に対して、
Javascriptを利用して文字列をカットするのが面倒だったので、
色々と調べていたら良い情報が見つかりました。

【使用プロパティ】
 プロパティ名:text-overflow

text-overflow CSS プロパティは、テキストが表示領域をオーバーフローしていることを、
ユーザに知らせる方法を決めます。
クリップするか、省略記号 (‘…’、U+2026…) を表示するか、
ウェブ著作者の定義した文字を表示させることができます。

引用元

使用例、及び実行例は下記の通りです。
確かに「…」で省略表示してくれている…!
[codepen_embed height=”269″ theme_id=”0″ slug_hash=”XKQJbK” default_tab=”css,result” user=”miko3″]See the Pen <a href=’https://codepen.io/miko3/pen/XKQJbK/’>CSSTEST</a> by miko3 (<a href=’http://codepen.io/miko3′>@miko3</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

これで手間が省けた…(:3_ヽ)_

 

コメントを残す

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