英語が「単語ごと」勝手に改行されて幅が揃わない現象。

web

サイト制作時、HTML,CSSで、

テキストの半角英語が「単語ごと」勝手に改行されてしまい幅が揃わないお節介な現象。

これ。

デザインによっては、幅をきっちり揃えたい時がある。

でもお節介に単語が途中で切れないように改行されてしまう。

これを解決するには、どうしたらいいのか。

結論:「word-break: break-all」をつかう。

word-break: break-allを使えば、要素の幅に従って壁にぶつかったら改行してくれるようになる。以下のように。

word-break: break-all;

まぁこれは雑に作ったものなのできっちり揃ってはいないが、これで単語とか関係なしに要素の幅いっぱいのところで改行されるようになった。

『word-break: break-all』の———使い方。

以下のように使う。

p{
word-break: break-all
}

以上。

それでは、しばしの別れ。

広告