CSSでURLや英単語がボックスからはみ出る現象の対策

作成:2014/04/24 更新:2014/04/25

ボックスからはみ出る
コーディングをしているとdivなどのボックス要素からURLや英単語がはみ出して見栄えが悪くなることがあります。

その解決策をメモ。

word-wrapを指定

サイト全体に反映させたかったのでbodyに適用した。

body {
  word-wrap: break-word;
}

確認してみると折り返されている。
折り返した

フリーのエンジニアになって仕事を自由に選びたい！正社員並みの保証が欲しい！

という相反する要望をかなえてくれるのが【midworks】です。

雇われるだけの生活から脱出してみませんか？

単語の途中で折り返されるというのはめったに無いことですが、表示の崩れはなんとなくそのサイトの信用度が落ちるのでなるべく避けたいですね。