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

エ・ビスコム・テック・ラボ
2008-09-19 12:31:01
  • このエントリーをはてなブックマークに追加

 今回は、テキストの自動改行の処理方法を指定するword-breakプロパティを紹介する。Internet Explorerが独自拡張したプロパティだったが、CSS 3の草案「Text」に採用され、現在ではSafari 3Chromeも対応している。

ブラウザにおけるテキストの自動改行

 まずは、主要なブラウザでテキストを表示したときの標準の自動改行の処理を確認しておこう。ブラウザに表示したテキストは、ブラウザ画面やボックスの右端で自動的に改行される。このとき、欧文のテキストは半角スペースの位置で改行されるが、単語の途中で改行されることはない。一方、日本語のテキストは任意の位置で改行される。

欧文のテキストを表示したもの 欧文のテキストを表示したもの
ブラウザで表示を確認する
日本語のテキストを表示したもの 日本語のテキストを表示したもの
ブラウザで表示を確認する

 黄緑色の枠で囲んだボックスの横幅は、ブラウザ画面の横幅に応じて変わるようになっているので、大きさを変えながら改行が入る位置を確認してみてほしい。

日本語のテキストの中の英単語

 日本語のテキストの場合でも、文章中の英単語の中に改行が入ることはない。たとえば、次のようにボックスの横幅を変えてみると、「Weather」という単語の途中には改行が入らないので、2行目の行末にスペースができていることがわかる。

ボックスの横幅を変えて日本語のテキストを表示したもの ボックスの横幅を変えて日本語のテキストを表示したもの

禁則処理

 日本語のテキストに対しては禁則処理も行われる。禁則処理とは、句読点や閉じ括弧、小さい「っ」などの文字が行頭にこないようにする処理だ。

 たとえば、次のようにボックスの横幅を変えてみると、1行目の行末には「す」が入るスペースはあるが、「。」だけが行頭に表示されるのを防ぐため、「す」も2行目に表示される。

ボックスの横幅を変えて日本語のテキストを表示したもの ボックスの横幅を変えて日本語のテキストを表示したもの

 しかし、Firefoxでは「久々」の「々」が、Internet Explorerでは小さい「っ」が行頭に表示されるなど、ブラウザごとに細かな処理の違いがある。

Firefoxでの表示。「々」が行頭に表示されている Firefoxでの表示。「々」が行頭に表示されている
Internet Explorerでの表示。小さい「っ」が行頭に表示されている Internet Explorerでの表示。小さい「っ」が行頭に表示されている

自動改行の処理方法を指定する

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]