CSS3 text-overflow プロパティ

text-overflow プロパティを使用します：

div {
text-overflow: ellipsis;
}

他の "Try it Yourself" 例が下にあります。

定義と用法

text-overflow プロパティは、表示されないオーバフローしたコンテンツをどのようにユーザに通知するかを指定します。

デフォルト値：	clip
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.textOverflow="ellipsis" Try it

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

プロパティ
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-

text-overflow: clip|ellipsis|string|initial|inherit;

値	説明	Play it
clip	デフォルト値。テキストを切り取ります	Play it ❯
ellipsis	>テキストを切り取ったこと表すために、省略記号 ("...") を表示します	Play it ❯
string	テキストを切り取ったことを表すために、指定の文字列を表示します
initial	プロパティにデフォルト値を設定します。initial を参照	Play it ❯
inherit	このプロパティは親要素を継承します。inherit を参照

ホバー効果付きの text-overflow
この例は、要素の上にカーソルを乗せたときに、どのようにテキスト全体を表示するかのデモです。