
CSS 3におけるテキストの自動改行と禁則処理の定義
エ・ビスコム・テック・ラボ
2008-09-26 21:17:01
禁則処理に関する設定
前回紹介したように、ブラウザで日本語のテキストを表示すると、標準で禁則処理が行われる。禁則処理とは、句読点や小さい「っ」などの文字が行頭にこないようにする処理だ。
しかし、SafariとChromeは日本語のテキストに対して「word-break:break-all」と指定すると、禁則処理を無効にすることができる。
たとえば、次のサンプルではテキストの禁則処理を上は有効に、下は無効に設定している。禁則処理を無効にしたテキストでは、小さい「っ」や「。」が行頭にきていることがわかる。

div#text01{ word-break: normal; } div#text02{ word-break: break-all; }
こんにちは、今日はとてもいい天気です。ずっと雨続きで、久々にいい天気になりました。Weather Newsでは「降水確率は20%」と発表されています。こんにちは、今日はとてもいい天気です。ずっと雨続きで、久々にいい天気になりました。Weather Newsでは「降水確率は20%」と発表されています。
※ブラウザで表示を確認する
一方、Internet Explorerの場合、word-breakプロパティの指定は禁則処理には影響しない。Internet Explorerではline-breakプロパティで禁則処理に関する設定を行うようになっている。
line-breakプロパティでは禁則処理の有効・無効ではなく、厳密さを指定する。指定できる値は「normal」と「strict」の2種類で、「normal」では緩い禁則処理が、「strict」では厳密な禁則処理が行われる。
たとえば、「normal」では小さい「っ」や長音符「ー」は禁則処理の対象にならないが、「strict」では禁則処理の対象となる。一方、句読点や閉じ括弧はline-breakプロパティの指定とは関係なく、常に禁則処理の対象となる。
次のサンプルはテキストの禁則処理を上は「normal」に、下は「strict」に設定したものだ。上のテキストでは小さい「っ」が行頭にきているが、下のテキストではきていないことがわかる。一方、どちらのテキストでも句点「。」は行頭にこないように処理されている。

div#text01{ line-break: normal; } div#text02{ line-break: strict; }
※ブラウザで表示を確認する