サイトの表示テストを行っていて、指摘を受けたので調べてみました。
Macではこの現象がでなかったから気付かなかった。。。
このページのもくじ
長いURLはどうして自動改行されないの？
WEBページの文章は、画面の端やボックスの端までくると自動的に改行されます。
しかし、途中に空白やハイフンを含まない英数字が長く続いている場合は、自動改行されません。
これは「単語の途中では改行しない」という英語の禁則ルールが適用されているからです。そのため、ボックスの端からはみ出してレイアウトが崩れたり、画面からはみ出して横スクロールが必要になったりしてしまいます。
対処方法
CSSを使って、自動改行の禁則ルールを変更します。
- overflow-wrapプロパティ
1行に収まりきらない場合の改行方法を指定。 - word-wrapプロパティ
1行に収まりきらない場合の改行方法を指定。※overflow-wrapの旧名称。 - word-breakプロパティ
改行に関する禁則処理を指定。
おすすめは「overflow-wrap」プロパティ
※このプロパティはCSS3から採用されましたため、IEやEdge・Firefoxなど一部のブラウザでは古い名称の「word-wrap」を使う必要があります。
＜書き方＞
body {
word-wrap: break-word;
}
このプロパティの値は子要素にも継承されるため、body要素に対して指定しておけば、ページ内のあらゆる要素を一括して対象にできます。これで、1行内に収まりきらない場合に限って単語の途中でも自動改行さるようになります。
ただし、1行の横幅が決まらない場所では効果が出ません。
内容量に応じて横幅が自動計算されるような場所では、必要に応じて横幅を拡張できてしまうために、自動改行する位置が決められないためです。
その場合は、全体をwrapで囲って横幅（width:100%）を指定した後、中のボックスのレイアウトを固定します。
または「word-break」プロパティを使います。
.sample {
word-break:break-all;
}
このプロパティは、すべての禁則処理を無効化します。その結果、長いURLや長い英数字の途中であっても自動改行されるようになります。たとえば、和文では行頭に句読点が来てしまったり、英文では「fox」のような3文字しかない単語が「fo」と「x」の間などで改行される可能性があります。
なので、設定には注意が必要になります。部分的に適用するのがベスト。
ちなみに、ブラウザのデフォルトの値は「normal」です。値に「normal」が指定されていれば、領域内に収まりきらない場合にも通常の禁則処理が適用され、改行されることなく横方向に伸びて表示されます。
参考サイト：https://allabout.co.jp/gm/gc/463542/3/
