[CSS3 を使ってみる：第十一回] はみ出す文字を「...」にして表示する(text-overflow)

前に CSS3 の text-overflow というエントリーでも書いたが、text-overflow を使うと、領域の幅を超えてはみ出している文字を「...」にして表示してくれる。

◆text-overflow のプロパティ

text-overflow: ellipsis;

以下は div (id: textOverflow、width: 100px、height: 100px) の中に長い単語「abcdefghijklmnopqrstuvwxyz」と「あいうえおかきくけこさしすせそたちつてとなにぬねの」を入れた場合。

#textOverflow {
  overflow: hidden; /* overflow してるのを hidden するので必須 */
  text-overflow: ellipsis; /* Safari、Chrome 用 */
  -o-text-overflow: ellipsis; /* Opera 用 */
  -moz-text-overflow: ellipsis; /* Firefox 用 */
  white-space: nowrap; /* 日本語が対象の場合は必須 */
}

まずは、text-overflow を設定しない場合。overflow: hidden; によってぶつ切りにされている。


text-overflow で ellipsis を設定した場合は、「...」で表示される。現在、Firefox では Firefox 用の -moz-text-overflow を設定しても効果はない。まぁいずれは有効になる日が来ると思う。


最後に、white-space: nowrap; を設定しない場合。アルファベットのみ「...」で表示されている。


確認環境：
Safari 5.0、Chrome 5.0.375.70、Opera 10.53

正常に動作しなかった環境：
Firefox 3.6.3

W3C：
CSS3 Text Module