長い半角英数字が親ブロックから飛び出してしまう問題へのアプローチ

.hyphenate { -ms-word-break: break-all; word-break: break-all; // Non standard for webkit word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

情報源: hyphens | CSS-Tricks

.hyphenate {
 -ms-word-break: break-all;
 word-break: break-all;

 // Non standard for webkit
 word-break: break-word;

webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;

}

スタイルを適用しない場合

http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

スタイルを適用した場合

http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

インラインで、手動で調整する場合（ソフトハイフン　)

http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

インラインで、手動で調整する場合（HTML5 element　<wbr />)

http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

wbr要素とbr要素の違い

以下は、ホスト以外の　a　を　a<wbr />に置換したURLですが、brが常に改行するのに対し、wbrは必要と思われる場所だけで改行が行われます

http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Memo

display:table-cell

http://example.com/ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

HTML

<div style="display:table;table-layout:fixed;width:300px;">
<div class="hyphenate" style="display:table-cell;">http://example.com/ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
</div>

<div style="width:300px;">
<div class="hyphenate" style="display:table-cell;">http://example.com/ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
</div>

CSS

.hyphenate {
 /* 
 -ms-word-break: break-all;
 word-break: break-all;
 */
 word-break:break-word;
 overflow-wrap:break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
}

CSS note