長い半角文字を入れるとボックス・エリアが無視される

htmlコーディングの話です。
決まった幅のボックス内で文字を流し込む場合、全角文字でしたらボックス内で折り返されますが、半角文字を入れるとボックス幅で折り返さず（改行されず）ボックスの幅が拡張されます。


これは単語の途中で改行させないための措置です。実際には全角文字にも適用されているのですが、全角文字は単語の切れ目が厳密に判断できず緩やかに適用されるため、目立たないかたちとなっています。
半角の場合はスペースなどで単語が判断できるので強力に効いてきてしまうようです。

英文の場合はそれでも良いのでしょうが、urlなどを記載する場合には問題となります。
切れ目の無い長い文字列だとボックスが勝手に拡張されて全体のデザインが崩れてしまいます。

この設定がcssにあります。word-breakプロパティとword-wrapプロパティです。どちらもCSS3で採用されました。それ以前はいろいろテクニックが必要でしたが、現在はこのプロパティでまず問題無いようです。

それぞれの指定値はリファレンスを見てもらうとして、とにかくボックス幅重視・単語の切れ目は無視！の場合は以下の設定にします。

 word-break: break-all;

この場合「。」とか「、」で始まる行も出てきてしまうのでどこかで妥協が必要です。