[CSS3 を使ってみる：第十回] 長いアルファベット単語を折り返す(word-wrap)

word-wrap を使うと、領域の幅を超える長いアルファベット単語を折り返すことができる。

◆word-wrap のプロパティ

word-wrap: break-word;

以下は div (id: wordWrap、width: 100px、height: 100px) の中に長い単語「abcdefghijklmnopqrstuvwxyz」を入れた場合。

#wordWrap {
  word-wrap: break-word;
}

まずは、word-wrap を設定しない場合。単語が長過ぎて領域を越えてしまっている。


word-wrap で break-word を設定した場合。領域内にキチンと収まっている。


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

W3C：
CSS Text Level 3