【css】word-break：テキストや単語の改行方法を指定

最近、tableで表組みした際、width設定が思うようにいかず、色々調べてみたら中に入れるテキストの言語によってcssの追加設定をしなければならないことに今更ながら気付きました。
ほんと今更ではあるのですが、今までほぼ日本語しか入れ込んだことがなかったので我ながらびっくりです（苦笑）。

word-breakプロパティ

word-breakプロパティはテキストの言語によって異なる。
Chinese（中国語）・Japanese（日本語）・Korean（韓国語）の頭文字をとってCJKと呼ぶそうで、 英語などの非CJKの言語とCKJ（中国語・日本語・韓国語）では改行方法の厳格さが異なる。

■normal
初期値。
■break-all
文字列のどこでも（単語の途中でも）改行する。
■keep-all
CJK テキストの改行しない。CJK以外のテキストはnormalと同じ。
■break-word
非推奨。
単語の区切りで改行するが、場合によっては単語の途中でも改行する。

word-breakの例

html

<p><code>word-break:normal</code></p>
<p class="normal word-break-box">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
<p><code>word-break:break-all</code></p>
<p class="break-all word-break-box">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
<p><code>word-break:keep-all</code></p>
<p class="keep-all word-break-box">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
<p><code>word-break:break-word</code></p>
<p class="break-word word-break-box">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>

css

<style>
.word-break-box{
	width:60%;
	border:1px solid #999;
	margin:0 0 50px 0;
	padding:10px;
}
.nomal{
	word-break:normal;
}
.break-all{
	word-break:break-all;
}
.keep-all{
	word-break:keep-all;
}
.break-word{
	word-break:break-word;
}
</style>

html＋css

こうして並べて見ると違いが歴然ですよね。
早々英語をUPすることはありませんが、最近は長いurlも多いので気をつけねばです。