【css】長いURLが改行されない場合の原因と対処について ※word-breakプロパティ

2016年8月12日

コーディングをしていて、スマホ表示時にmediaqueryで幅を指定しているはずなのになぜかurlが画面幅に収まらない！ということが過去にあったのですが、URLが改行されていないことが原因でした。

PCでの表示では幅が広いのそんな場面はほぼないのですが、スマホだと改行されないと問題ですよね、、、
URLは自動改行してくれないことがある?ようです（※してくれることもあるんかい!?）

そんな時に、cssプロパティのword-breakを使って下記のように解決できます！

break-allを指定することで、表示幅に合わせて改行をしてくれます。
※単語の途中で改行されたりすることもあるので、そこは注意

【参考サイト】
http://www.htmq.com/style/word-break.shtml
http://qiita.com/gonshi_com/items/b38780d1f3e31d1c0a84