CSSで半角英数字をボックス内で自動改行させる!

2014/12/07

word-wrap

こんにちは。
今回はCSSで半角英数字をボックス内で自動改行させる!です。

半角英数字の文字は初期値だとボックスを突き抜けて表示されてしまいますね。
昔これではまった覚えがあります。

 

やり方は二通りあります。

 

単語の手前で改行します。
ボックスの幅以上になると、その単語の途中で改行します。

 

幅に関係なく単語の途中で改行します。

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

いかがでしたか。最初のbreak-wordの方が使い勝手がよさそうです。
以上でCSSで半角英数字をボックス内で自動改行させる!でした。

topへ戻る