半角文字列の折り返し～HTMLの半角英数字～

通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、折り返さない場合が多い。また、折り返しの条件はブラウザ毎に異なります。

文字列折り返しブラウザ別サンプル

mozilla系以外のブラウザの多くは、URL (URI) 等の連続する半角文字でも、ハイフン「-」等の一部の半角記号を区切りと認識し折り返しするようです。

CSSのword-break:break-all;、word-break:keep-all;はIE独自の仕様なので、IE以外では通常通りの挙動。つまりCSSによる折り返しはされない。Safari,Operaのサンプルでは、半角文字が折り返しされているように見えますが、あくまでもハイフン「-」で折り返している事に注意。Firefoxはハイフン等の半角記号でも、連続する半角文字であれば折り返さないようです。

空白を含まない「全角記号」を用いて単語(半角文字)を区切った例では、概ね折り返していますが、Operaでは折り返していないようです。

テキスト。実際（現在）の表示

← width:15em →

半角区切り: html:css:Firefox:html:css:Firefox:html:css:Firefox:html:css:Firefox
全角区切り: html：css：URL：html：css：URL：html：css：URL：html：css：URL
半角スペース: html : URL : html : URL : html : URL : html : URL : html : URL : html : URL
overflow:hidden;: overflow:hidden;overflow:hidden;overflow:hidden;overflow:hidden;; 内容物の幅に合わせて勝手にレイアウトを変えるな、と思うわけですよ
overflow:hidden; width指定: overflow:hidden;overflow:hidden;overflow:hidden;overflow:hidden;; 内容物の幅に合わせて勝手にレイアウトを変えるな、と思うわけですよ
word-break:break-all;: word-break:break-all;word-break:break-all;word-break:break-all;word-break:break-all;; 長いURL等の連続する半角英数字は折り返されない場合が多い
word-break:keep-all;: word-break:keep-all;word-break:keep-all;word-break:keep-all;word-break:keep-all;; 長いURL等の連続する半角英数字は折り返されない場合が多い
Appendix: (^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)(^^;)

半角文字列の折り返し

文字列折り返し ブラウザ別サンプル

テキスト。実際（現在）の表示

文字列折り返しブラウザ別サンプル