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

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

その解決策をメモ。

word-wrapを指定

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

body {
  word-wrap: break-word;
}

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

わからないことは人に聞こう

プログラミングをする上で、わからないことはネットなどを使い自分で調べる技術が必要ですよね。

時間がかかっても、ある程度のことは解決できます。

しかし、どうしても答えにたどり着けなかったり、探す時間が惜しいときもあります。

そこでオススメなのが無料登録でプログラミングに関する質問ができるテラテイルです。

質問の投稿にコードも投稿できるので、自分のコードを投稿して問題のある箇所を指摘してもらうことができます。

プログラマーには、自分で探す技術も必要ですが、人に聞く技術は更に重要です。

登録無料で質問できますので、テラテイルで質問する力を磨いてみましょう！

今すぐテラテイルで質問する

おわりに

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