CSS3 の text-overflow

html5 と同じように CSS3 も気になってはいるのだが、text-overflow をちょっと気に入っている。
ボックスよりも文字が長い場合、文字を途中で切って自動的に「...」を付随してくれるというもの。

今のところ、Safari 4 と Opera 10.00 beta2 で確認している。おそらく Safari と同じ WebKit の Chrome もいけるだろう。

--- CSS 側 ---

.test {
width: 300px;
height: 1.4em;
text-overflow: ellipsis; /* Safari 用 */
-o-text-overflow: ellipsis; /* Opera 用 */
overflow: hidden;
white-space: nowrap; /* この指定がないと効果が出ない。 */
border: 1px solid #666666;
}
.test:hover {
text-overflow: inherit; /* Safari 用 */
-o-text-overflow: inherit; /* Opera 用 */
overflow: visible;
}

--- html 側 ---

<div class="test">
ボックスより長い文章はちぎれて表示、マウスをあわせると全部表示。
</div>

今まではプログラムで文章の長さを見て同様の処理をする必要があったが、これは便利。

Firefox 用の「-moz-text-overflow: ellipsis;」というのもあるんだが、何故か確認できない。。。