cssのword-break・word-wrapプロパティが効かないときの対処方法

cssで文字がはみ出るときに、ちゃんと要素内で文字を折り返したいときに使うのは word-breakプロパティとword-wrapプロパティだと思いますが、自分自身ネットで検索するとよくでてくるだけできちんと理解してなかったので備忘録的に書いておこうと思う。(word-breakを指定しても文字の折り返しが効かないケースも書いておく)

そもそもword-break・word-wrapとは?

word-breakプロパティは、単語の切れ目で改行するか、単語の切れ目に関係なく表示範囲に合わせて改行するかを指定する。

値は以下の3つ。

  • normal → 英語は単語の切れ目で改行される。日本語は表示範囲に合わせて開業される
  • break-all → 言語に関係なく表示範囲で改行される
  • keep-all → 言語に関係なく単語の切れ目で改行される。

正直word-breakの効果に関しては、説明だけ見てもその効果がわかりにくいので、htmlクイックリファレンスを参照するのがよいと思う。

文字の折り返しでword-breakって関係ない?

word-breakの初期値はnormalで、上記説明にもあるとおり、日本語だったら表示範囲で改行されるようになっているので、別に値を設定する必要もない。

それに加え、break-allで値を設定しても、ちゃんと文字が折り返されないケースもある。

cssのword-wrapプロパティとは

word-wrapプロパティはInternetExplolerが独自に採用したものらしく、効果はword-breakプロパティと変わらないみたい。

というかブラウザがChromeなら関係ない話かもしれない。このあたりもhtmlクイックリファレンスを参照するのがよいと思いますが、参考までにword-wrapプロパティの値は以下の2種類。

  • noraml → 単語の途中で改行しない。この場合必要に応じて表示範囲を拡大
  • break-word → 単語の途中で改行

説明だけみても効果がわからないとおもうのでやはりhtmlクイックリファレンスを見るのがよいと思う。

文字がはみ出るのをなくしたいだけならoverflow: hidden:でもよいが・

要素から文字がはみ出た場合、それを隠したいだけなら、overflowプロパティの値をhiddenにするだけでもいいけど、この場合ははみ出た分の文字が隠れるだけなので、結果的には文字が見切れてしまい適切に改行はされない。

結局word-breakが効かないときってどうしたらいいの?

要素から文字がはみ出たときは、word-breakを疑うのが一般的っぽいけど、説明をみるかぎりでは、とくに設定しなくても文字がはみ出ずに適切に改行されるはず。

しかし、なぜかうまくいかないケースがある。そのときは、paddingを設定していてかつwidthの値を100%にしていないかどうかを疑ってほしい。

このケースだとwidth100%にpadding分が上乗せされてしまい、文字が範囲内におさまっているんだけども、paddingのせいで文字が要素からはみでた格好になる。

では、この現象を解決するにはどうしたらよいのか、答えは【widthに何も設定しない。つまりはwidth: auto;】にすればいい。これでwidthは適切に調整される。これで文字が要素からはみ出ているように見える現象は解決する。

かなり稀なケースではあると思うけど、備忘録的に書いてみた。以上でこの記事は終わりです。