Attention! Translated article might be found on my English blog.

2015年7月7日火曜日

CSSを使って英語文字列の途中で強制改行する

【CSS】長い文字列をCSSで強制的に改行させたいときは『word-wrap:break-word;』を使うべし。 - すたら日記によると、
word-wrap: break-word;を設定すれば可能のようでした。

しかし上記サイトの解説の通り、同時にwidthを指定する必要がありました。
試してみたところ、widthは%ではなくpxなどの固定値でなければならないようで、
ウインドウリサイズに追随しないという問題がありました。

他の解決策を探したところ、Word wrapping/hyphenation using CSS. — Kenneth Auchenberg
動的なリサイズでも改行してくれる方法がありました。 
今回はWebKitだけ対応できれば良いので、word-break:break-all;を設定したところ、
無事リサイズに追随して改行されるようになりました。 

なお記事にある通り、break-allだとワード単位で区切られないという副作用があり、
break-wordという非公式な値を指定することでこの副作用を抑制しているようです。
自分の場合はそこまで神経質になる必要が無いのでbreak-allで済ませました。

また、クロスプラットホームに対応させる場合には、
他にもいろいろ指定するする必要があるようです。