IE…urlなど半角文字の文が折り返さずにはみ出る
解決策
word-breakプロパティーでbreak-allを指定する
word-break: break-all;
半角文字列の折り返し問題
半角文字列の折り返し問題はCSSが普及する以前、テーブルレイアウトが主流のころからある問題である。英文は単語の途中で勝手に折り返してはならないという禁則処理からくる仕様なのだろう。たしかに、通常利用する上では半角スペースの混入しない半角英数文字列のみで構成された文章を記述するケースはほとんどないといえる。
問題になる場合があるとしたら以下の２点がほとんどだろう。
- URLを表示する場合。
- 横幅の非常に狭いブロックに文字列を記述する場合。
自ら手打ちで作るコンテンツの場合は、記述の調整で回避するのが懸命と思われるが、CMSなどの自動コンテンツ生成ツールでこの現象に対して意識の無い第三者が情報を記述するケースではそうもいかないので、悩みどころである。
この折り返し条件はブラウザごとにかなり仕様が異なる。冒頭に記述したプロパティーはIE独自の仕様なので、IE以外には効果がない。mozilla系以外のブラウザのほとんどはハイフンなどの一部の半角記号を区切り文字として認識し、折り返しするが、区切り文字が出現しない文字列の場合折り返しはされずオブジェクトの横幅からはみ出してしまう。