【HTML･CSS】 文章の一部、文字が領域を突き抜けてしまうのを検証してみた
文章(テキスト)の一部、文字がdivタグなどで囲った領域を
自動改行(折り返し)されず突き抜けてしまう現象をブラウザ毎に確認してみたのでメモ。
先に対処方法を大雑把に説明するとdivタグ(もしくは pタグなど)に
CSS(スタイルシート)で word-wrap:break-word; を適用すると自動改行してくれます。
どうして文章の一部が突き抜けるような事になるか、
ブラウザ上での英語文章と日本語文章の自動改行での動作の違いからのようです。
上の画像で改行の比較を見ると日本語文章の改行は1文字単位で自動改行がされていますが
英語文章は１単語（ワード）単位からの改行になります。
そのため、途切れ(スペースや点などで)の無い長い数列や英語文字列になると
１つの単語（ワード）とみなされて改行するポインが無いため領域を突き抜けてしまいます。
下の画像は英文の一部分で試しに単語同士の間を削除して繋げてみた様子です。
▼各ブラウザの自動改行の動作一覧表
▽確認に使用したブラウザ
- Internet Explorer 9
- ...ver9.0.8112.16421
- Chrome
- ...ver21.0.1180.89
- Sfari(Windows用)
- ...ver5.1.7
- Firefox
- ...ver15.0.1
- Opera
- ...ver12.02
[2012年9月28日] Sfari(Windows用)の動作を追加しました
▽表の記号説明
- ○
- ...自動改行(折り返し)
- △
- ...文字によって改行するかどうか異なる
- ／
- ...非改行
- (注意)
- 記号での動作は一部しか確認していないので
○ が付いていても改行しない記号がある可能性があるので注意。
CSS(スタイルシート)未設定時の動作
CSS(スタイルシート)未設定時の
各ブラウザの動作一覧表
文
字
ブラウザ＼英
語
全
角英
語
半
角数
字
全
角数
字
半
角記
号
全
角記
号
半
角ひ
ら
が
なカ
タ
カ
ナ漢
字IE9 ○ ／ ／ ／ △ △ ○ ○ ○ Chrome ○ ／ ○ ／ △ △ ○ ○ ○ Sfari(Win) ○ ／ ○ ／ △ △ ○ ○ ○ FireFox ／ ／ ／ ／ △ △ ○ ○ ○ Opera ○ ／ ○ ／ △ △ ○ ○ ○
半角の英字と数字は全滅、全角の英字と数字はブラウザ毎に改行の判断が異なっており、
その中でも FireFox は英数字すべて自動改行はしないようです。
記号に関しては改行の仕方にブラウザで差が出ているものの
記号が長く連続する事は滅多に無いのであまり気にしなくていいかも。
-
word-break:break-all; 設定時の動作
設定 word-break:break-all; での
各ブラウザの動作一覧表
文
字
ブラウザ＼英
語
全
角英
語
半
角数
字
全
角数
字
半
角記
号
全
角記
号
半
角ひ
ら
が
なカ
タ
カ
ナ漢
字IE9 ○ ○ ○ ○ △ ○ ○ ○ ○ Chrome ○ ○ ○ ○ ○ ○ ○ ○ ○ Sfari(Win) ○ ○ ○ ○ ○ ○ ○ ○ ○ FireFox ○ ○ ○ ○ ○ ○ ○ ○ ○ Opera ○ ／ ○ ／ △ △ ○ ○ ○
IE9は惜しくも全角記号で△が付いています、
OperaはCSS未設定時と動作が変わらないので word-break には対応してないようです。
-
word-wrap:break-word; 設定時の動作
設定 word-wrap:break-word; での
各ブラウザの動作一覧表
文
字
ブラウザ＼英
語
全
角英
語
半
角数
字
全
角数
字
半
角記
号
全
角記
号
半
角ひ
ら
が
なカ
タ
カ
ナ漢
字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>ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</p>
</div>
<!-- 英字半角 -->
<div>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</div>
<!-- 数字半角 -->
<div>
<p>１２３４５６７８９０１２３４５６７８９０</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>
