CSS 3におけるテキストの自動改行と禁則処理の定義

禁則処理に関する設定

　前回紹介したように、ブラウザで日本語のテキストを表示すると、標準で禁則処理が行われる。禁則処理とは、句読点や小さい「っ」などの文字が行頭にこないようにする処理だ。

• テキストの自動改行をコントロールするword-breakプロパティ

　しかし、SafariとChromeは日本語のテキストに対して「word-break:break-all」と指定すると、禁則処理を無効にすることができる。

　たとえば、次のサンプルではテキストの禁則処理を上は有効に、下は無効に設定している。禁則処理を無効にしたテキストでは、小さい「っ」や「。」が行頭にきていることがわかる。

Safariでの表示。Chromeでも同じ表示になる

div#text01	{
	word-break: normal;
	}

div#text02	{
	word-break: break-all;
	}

<div id="text01">
こんにちは、今日はとてもいい天気です。ずっと雨続きで、久々にいい天気になりました。Weather Newsでは「降水確率は20%」と発表されています。
</div>

<div id="text02">
こんにちは、今日はとてもいい天気です。ずっと雨続きで、久々にいい天気になりました。Weather Newsでは「降水確率は20%」と発表されています。
</div>

※ブラウザで表示を確認する

　一方、Internet Explorerの場合、word-breakプロパティの指定は禁則処理には影響しない。Internet Explorerではline-breakプロパティで禁則処理に関する設定を行うようになっている。

　line-breakプロパティでは禁則処理の有効・無効ではなく、厳密さを指定する。指定できる値は「normal」と「strict」の2種類で、「normal」では緩い禁則処理が、「strict」では厳密な禁則処理が行われる。

　たとえば、「normal」では小さい「っ」や長音符「ー」は禁則処理の対象にならないが、「strict」では禁則処理の対象となる。一方、句読点や閉じ括弧はline-breakプロパティの指定とは関係なく、常に禁則処理の対象となる。

　次のサンプルはテキストの禁則処理を上は「normal」に、下は「strict」に設定したものだ。上のテキストでは小さい「っ」が行頭にきているが、下のテキストではきていないことがわかる。一方、どちらのテキストでも句点「。」は行頭にこないように処理されている。

Internet Explorerでの表示

div#text01	{
	line-break: normal;
	}

div#text02	{
	line-break: strict;
	}

※ブラウザで表示を確認する

CSS 3における自動改行と禁則処理の定義