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

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

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

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

引用元

使用例、及び実行例は下記の通りです。
確かに「…」で省略表示してくれている…!

See the Pen CSSTEST by miko3 (@miko3) on CodePen.0

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

 

コメントを残す

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