CSSで強制改行させる。あるいはさせない

CSSの改行について忘れるのでメモっておきます(☝ ՞ਊ ՞)☝

改行させない

改行させたくない場合white-spaceにnowrapを指定します。

ボックスが自動縮小してテキストが押されてしまうと、テキストが改行されてしまうケースがあります。そのような場合white-space:nowrap;は便利です。

改行させる

強制的に改行させたい場合word-breakにbreak-allを指定します。

この強制改行スタイルは意外に使える場所が多いです。

あるいはすでにwhite-spaceにnowrapが指定されている場合は解除します。

white-spaceにnormalを指定するとnowrapを解除できます。

例えば、URLのテキストを英字にしている場合、テキストが長いとボックスの右をつけ抜けてしまいます。
あるいは上位ボックスにwidthを指定しるにもかかわらずテキスト量が増えるとテキストにボックスが押されて横に広がってしまう場合があります。tableのtdやthが拡大してしまう場合、word-breakが活躍するケースがあるとおもいます。