CSSテキストオーバーフロープロパティ

text-overflowプロパティの使用：

div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このtext-overflowプロパティは、表示されていないオーバーフローしたコンテンツをユーザーに通知する方法を指定します。クリップしたり、省略記号（...）を表示したり、カスタム文字列を表示したりできます。

テキストオーバーフローには、次の両方のプロパティが必要です。

デフォルト値：	クリップ
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	オブジェクト.style.textOverflow = "ellipsis"

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

数字の後に-o-が続く場合は、プレフィックスで機能した最初のバージョンを指定します。

Property
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-

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

Value	Description	Play it
clip	Default value. The text is clipped and not accessible
ellipsis	Render an ellipsis ("...") to represent the clipped text
string	Render the given string to represent the clipped text
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

ホバー効果のあるテキストオーバーフロー（ホバーにテキスト全体を表示）：

div.a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.a:hover {
  overflow: visible;
}