word-breakとword-wrapはややこしい

Updated / Published

word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。

折り返しを制御する2つのCSSプロパティ

幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいのです。

  1. word-break
  2. word-wrap / overflow-wrap

2つ目のプロパティにword-wrapとoverflow-wrapを併記していますが、これは現在策定中のCSS3仕様案ではword-wrapからoverflow-wrapへと改称されたためです。Internet ExplorerやFirefoxでは未だ新しいoverflow-wrapのプロパティ名称がサポートされていないため、overflow-wrapを用いる場合は、後方互換性のためにword-wrapの名称も一緒に記載する必要があります。

word-breakもword-wrapも元はInternet Explorer5.5から独自に先行実装されたプロパティであり、CSS3から勧告候補仕様として採用されることで、今ではすべてのブラウザでサポートされています。これらのプロパティを長い英単語や長いURLの折り返しを制御するために用いる場合は次の値を指定します。

body{
  word-break : break-all;
}
body{
  word-wrap : break-word;
  overflow-wrap : break-word;
}

word-breakプロパティもword-wrap(overflow-wrap)プロパティも子孫要素へと値が継承されます。そのため、html要素やbody要素に指定して用いることが一般的です。なお、body{ word-break: break-all; word-wrap: break-word; overflow-wrap: break-word;}のように両方のプロパティを記述した場合は、word-break: break-all;だけを指定した場合と同じ動作となります。というわけで、この2つのプロパティのややこしいところは名称は然ることながらそれぞれの折り返しの制御が異なった動作をすることです。

word-break:break-all;の折り返し

word-break:break-all;を折り返しの制御に使用するのは好ましくないとされています。その理由として、word-break: break-all;では一切の禁則処理が解除されるため、好ましくない位置で単語を折り返してしまうことが起こりえます。たとえば英語のorのように2文字だけの単語でも、orが行ボックスの幅からあふれそうな位置にあれば、あふれる直前で折り返すためoとrの途中で折り返してしまいます。日本語においても行頭が句読点で始まるなどの違和感のある文体になることが起こり得ます。

word-wrap:break-word;の折り返し

一方、word-wrap:break-word;(overflow-wrap:break-word;)は、単語の途中で折り返さないと行ボックスの幅からあふれてしまうときのみ、その単語の途中で折り返します。単語の途中で折り返しが発生するのは、その単語の幅が行ボックスの幅より大きい場合のみとなります。つまり、可能な限り禁則処理が保持され、可能な限り単語途中での折り返しを避けることができます。特に単語の途中に折り返しを基本的に入れない欧文文字のような文字列を表現する場合は、word-wrap:break-word;(overflow-wrap:break-word;)が望ましい折り返しの制御とされます。

プロパティ名称がword-wrapからoverflow-wrapに改称された背景にも、word-breakとの曖昧さを回避し、わかりやすくする意味もあったのでしょう。

word-wrap:break-word;が効かない場合

長い英単語や長いURLの折り返しを制御するにあたって、望ましい振る舞いをしてくれるword-wrap:break-word;(overflow-wrap:break-word;)ですが、効いていないような振る舞いになるスタイル状況下があります。shrink-to-fit width（内容にぴったりと合うように縮んだ幅）になっている場合と自動レイアウトアルゴリズム（table-layout:auto;）を使用しているテーブルセル（display:table-cell;）の場合です。

shrink-to-fit widthとは、display:inline-block;, float:left;, float:right;, position:absolute;などのプロパティと値が指定された要素で幅が指定されていない（width:auto;）場合に、ブラウザが勝手に内容にぴったりと合うように適当な領域を確保してくれている状況を言います。

shrink-to-fit widthと自動レイアウトアルゴリズムのテーブルセルの場合、その内容の幅によって自身の幅が決められるため、word-wrap:break-word;による折り返さないと行ボックスの幅からあふれてしまうという計算そのものができないことから結果的にword-wrap:break-word;が効いていないような振る舞いになります。

回避策と注意喚起

display:inline-block;, float:left;, float:right;, position:absolute;などのプロパティと値が指定されたshrink-to-fit widthの場合は、幅（width）や最大幅（max-width）を明示してやれば良いだけです。width:auto;のために、その内容によって自身の幅が決められていたのを、width:100%;のように幅を決めることで、単語の途中で折り返さないと行ボックスの幅からあふれるかどうかを計算できるようになります。

問題は自動レイアウトアルゴリズム（table-layout:auto;）を使用しているテーブルセル（display:table-cell;）の場合で、word-breakとword-wrap（overflow-wrap）のややこしさをより一層ややこしくしています。

一切の禁則処理を解除するword-break:break-all;は自動レイアウトアルゴリズム（table-layout:auto;）を使用しているテーブルセル（display:table-cell;）のスタイル状況下でも関係なく折り返す位置になれば折り返します。そのため、自動レイアウトアルゴリズム（table-layout:auto;）を使用しているテーブルセル（display:table-cell;）では、本来はword-wrap:break-word;(overflow-wrap:break-word;)が用いたかったが効かないからという勘違いのもと（正確にはあふれるかどうかが計算できていないだけ）でword-break:break-all;が用いられてしまうことがよくあります。

テーブルセル（display:table-cell;）でword-wrap:break-word;(overflow-wrap:break-word;)があふれるかどうかを計算できるようにする作法の一つとしては、display:table-cell;の要素の親要素（display:table;）に対して、固定レイアウトアルゴリズム（table-layout:fixed;）を用いると良いでしょう。固定レイアウトアルゴリズムでは表の水平方向の列幅はセルの内容量に依存しない代わりに、表全体の横幅・列幅・ボーダーサイズ・セル間の距離によってレイアウトされるようになり、単語の途中で折り返さないと行ボックスの幅からあふれるかどうかを計算できるようになります。このときdisplay : table;な固定レイアウトアルゴリズムの要素には表全体の横幅も明示する必要があります。整理すると次のようになります。

.target_parent{
  display : table; 
  table-layout : fixed;
  width : 100% ;
}
.target{
  display : table-cell; 
  word-wrap : break-word;
  overflow-wrap : break-word;
}

IE6が退場し、じきにIE7も退場しようとしている今日のWebの世界では、上下中央揃えにする目的でvertical-align:middle;と組み合わせて、display:table-cell;（IE8からサポート）が多用されるようになってきました。それに伴い、word-wrap:break-word;(overflow-wrap:break-word;)が効かなったからなのか、word-break:break-all;が使用されてしまっている事例が大規模サイトにおいても度々見掛けられるようになってきています。word-wrap(overflow-wrap)プロパティの特定のスタイル状況下における振る舞いを理解しておくことで、より多くのサイトでより望ましい折り返しの制御が期待できることでしょう。

最後に、リアルにおいてもなぜ?どうして?そうなったの?!という折り返しがあります.........折り返し、大切です。