HTMLは、英文の場合ワードの途中では折り返さないという思想で設計されている（と思う）
長い英文の区切れないワードの場合、サイトの幅を超えてはみ出しちゃう事になる
日本人かつ昭和人なオレは馴染みがないが、英語は言葉の途中で折り返す（次行へ送る）のは非推奨なので、ブラウザもそれに則ってリフローしない設計になってるという事なんだろうね
※基本は半角スペースがワード区切り
当然、URLもアルファベット(半角・1バイト文字)の羅列なので、英文とみなされ、なにもしなければ、webページの右端で折り返さず、言葉の区切りまでハミ出す
たとえ英語圏の人たちだって、こんなのイヤだよね
現状においては、様々な幅のデバイスで閲覧されるので、コンテンツ側で丁度よく折り返るように文章を調整するなんて事をしても無意味
それでこんな対応
CSSに以下を追記
body{
word-wrap : break-word;
overflow-wrap : break-word;
}
※ word-wrap は旧タイプで overflow-wrap は未対応ブラウザがあるみたい
いずれは overflow-wrap に置き換えられるみたいだけど両方書いておくのが良いらしい
しか～し！
オレが運営しているあるサイトで、この対策が効かなかった
追記しても折り返らなかったのだ
検証サイトで全く同じ環境を作ったのにもかかわらず折り返り、対象サイトでは折り返らない
結論から言います
Word Press のプラグインで WP Fastest Cache Premium というのを導入している
wpで吐き出す動的ページをキャッシュして静的ページで渡す、CPUの負担を軽くしてくれるヤツだ
そいつはCSSもキャッシュするのだが、通常のwebページなどは、設定によって定期的にキャッシュをクリアするがCSS/JSは手動でクリアしないと、差し替えてくれない仕組みになってた
そんなんで、時間が経っても変更したCSSが書き換わらず、break-word が効いてなかったのだ
そいつをクリアして無事URLが折り返ってくれた
チャンチャン
※wpのテーマによっては、英文が折り返るようにCSSが書かれているのもある
参考：https://w3g.jp/blog/confusing_word-break_word-wrap