word-break
word-breakは、W3Cで審議中のものをInternet Explorerが独自に採用したものらしい。
表示範囲に合わせて改行 or 単語の切れ目で改行するか
文の改行の仕方について指定する際に使用。
normal 英語等は単語の途中では改行せず、単語の切れ目で改行。 日本語・中国語・韓国語等は表示範囲に合わせて改行。 このため単語の途中で改行されることもあり。 break-all 言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 keep-all 言語に関係なく単語の途中では改行せず、単語の切れ目で改行。
div.hoge1 {width:200px; word-break: normal; background-color:red; } div.hoge2 {width:200px; word-break: break-all; background-color:green;} div.hoge3 {width:200px; word-break: keep-all; background-color:blue;}
hoge.html
<html> <head> <link rel="stylesheet" href="hoge.css" type="text/css"> </head> <body> normal <div class="hoge1"> 日本語の場合は、表示範囲に合わせて改行されます。単語の途中で改行されることもあり。<br/> Click the Current Status link to read more about what's happening now with JavaServer Faces Technology and to download specifications and reference implementations. </div><br/> break-all <div class="hoge2"> 日本語・英語等の言語に関係無く表示範囲に合わせて改行されるのです。<br/> Click the Current Status link to read more about what's happening now with JavaServer Faces Technology and to download specifications and reference implementations. </div><b/r> keep-all <div class="hoge3"> 言語に関係無く単語の途中で改行することは無く、単語の切れ目で改行。<br/> Click the Current Status link to read more about what's happening now with JavaServer Faces Technology and to download specifications and reference implementations. </div> </body> </html>
IE限定のサイトだったので使用したのでした。