文章(テキスト)の一部、文字がdivタグなどで囲った領域を
自動改行(折り返し)されず突き抜けてしまう現象をブラウザ毎に確認してみたのでメモ。
先に対処方法を大雑把に説明するとdivタグ(もしくは pタグなど)に
CSS(スタイルシート)で word-wrap:break-word;
を適用すると自動改行してくれます。
どうして文章の一部が突き抜けるような事になるか、
ブラウザ上での英語文章と日本語文章の自動改行での動作の違いからのようです。
上の画像で改行の比較を見ると日本語文章の改行は1文字単位で自動改行がされていますが
英語文章は1単語(ワード)単位からの改行になります。
そのため、途切れ(スペースや点などで)の無い長い数列や英語文字列になると
1つの単語(ワード)とみなされて改行するポインが無いため領域を突き抜けてしまいます。
下の画像は英文の一部分で試しに単語同士の間を削除して繋げてみた様子です。
▽確認に使用したブラウザ
[2012年9月28日] Sfari(Windows用)の動作を追加しました
▽表の記号説明
文 字 ブラウザ\ | 英 語 全 角 | 英 語 半 角 | 数 字 全 角 | 数 字 半 角 | 記 号 全 角 | 記 号 半 角 | ひ ら が な | カ タ カ ナ | 漢 字 |
---|---|---|---|---|---|---|---|---|---|
IE9 | ○ | / | / | / | △ | △ | ○ | ○ | ○ |
Chrome | ○ | / | ○ | / | △ | △ | ○ | ○ | ○ |
Sfari(Win) | ○ | / | ○ | / | △ | △ | ○ | ○ | ○ |
FireFox | / | / | / | / | △ | △ | ○ | ○ | ○ |
Opera | ○ | / | ○ | / | △ | △ | ○ | ○ | ○ |
半角の英字と数字は全滅、全角の英字と数字はブラウザ毎に改行の判断が異なっており、
その中でも FireFox は英数字すべて自動改行はしないようです。
記号に関しては改行の仕方にブラウザで差が出ているものの
記号が長く連続する事は滅多に無いのであまり気にしなくていいかも。
文 字 ブラウザ\ | 英 語 全 角 | 英 語 半 角 | 数 字 全 角 | 数 字 半 角 | 記 号 全 角 | 記 号 半 角 | ひ ら が な | カ タ カ ナ | 漢 字 |
---|---|---|---|---|---|---|---|---|---|
IE9 | ○ | ○ | ○ | ○ | △ | ○ | ○ | ○ | ○ |
Chrome | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
Sfari(Win) | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
FireFox | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
Opera | ○ | / | ○ | / | △ | △ | ○ | ○ | ○ |
IE9は惜しくも全角記号で△が付いています、
OperaはCSS未設定時と動作が変わらないので word-break には対応してないようです。
文 字 ブラウザ\ | 英 語 全 角 | 英 語 半 角 | 数 字 全 角 | 数 字 半 角 | 記 号 全 角 | 記 号 半 角 | ひ ら が な | カ タ カ ナ | 漢 字 |
---|---|---|---|---|---|---|---|---|---|
IE9 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
Chrome | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
Sfari(Win) | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
FireFox | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
Opera | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
記号の改行の仕方に若干差があるものの確認したすべてのブラウザで改行されています。
動作確認に使用したコードです。
▽CSS
div{
background-color:#0f0;
height:100px;
width:100px;
}
▽CSS (word-break:break-all;
適用)
div{
background-color:#0f0;
height:100px;
width:100px;
word-break:break-all;
}
▽CSS (word-wrap:break-word;
適用)
div{
background-color:#0f0;
height:100px;
width:100px;
word-wrap:break-word;
}
▽HTML (共通)
<!-- 英字全角 -->
<div>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</div>
<!-- 英字半角 -->
<div>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</div>
<!-- 数字半角 -->
<div>
<p>12345678901234567890</p>
</div>
<!-- 数字半角 -->
<div>
<p>123456789012345678901234567890</p>
</div>
<!-- 記号全角 -->
<div>
<p>!#$%&’()=~|+{「=======!!!!!!!!!!!!!!!!!</p>
</div>
<!-- 記号半角 -->
<div>
<p>"#$%'()=~|{}^-`*+?--------------------------###############</p>
</div>
<!-- ひらがな -->
<div>
<p>あいうえおかきくけこさしすせそたちつてとなにぬねの</p>
</div>
<!-- カタカナ -->
<div>
<p>アイウエオカキクケコサシスセソタチツテトナニヌネノ</p>
</div>
<!-- 漢字 -->
<div class="you">
<p>亜意有絵尾可来区家子差市素背祖他地津手戸名似濡音乃</p>
</div>