【HTML・CSS】 文章の一部、文字が領域を突き抜けてしまうのを検証してみた

文章(テキスト)の一部、文字がdivタグなどで囲った領域を
自動改行(折り返し)されず突き抜けてしまう現象をブラウザ毎に確認してみたのでメモ。

先に対処方法を大雑把に説明するとdivタグ(もしくは pタグなど)に
CSS(スタイルシート)で word-wrap:break-word; を適用すると自動改行してくれます

▼目次

文章が領域を突き抜けている様子

どうして文章の一部が突き抜けるような事になるか、
ブラウザ上での英語文章と日本語文章の自動改行での動作の違いからのようです。

日本語文と英語文の自動改行の動作の違いを比較

上の画像で改行の比較を見ると日本語文章の改行は1文字単位で自動改行がされています
英語文章は1単語(ワード)単位からの改行になります
そのため、途切れ(スペースや点などで)の無い長い数列や英語文字列になると
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 は英数字すべて自動改行はしないようです。
    記号に関しては改行の仕方にブラウザで差が出ているものの
    記号が長く連続する事は滅多に無いのであまり気にしなくていいかも。

    CSS設定無しの様子


  • word-break:break-all; 設定時の動作

    設定 word-break:break-all; での
    各ブラウザの動作一覧表
         
        文
        字
    ブラウザ\

























    IE9
    Chrome
    Sfari(Win)
    FireFox
    Opera

    IE9は惜しくも全角記号で△が付いています、
    OperaはCSS未設定時と動作が変わらないので word-break には対応してないようです。

    word-break:break-all; 適用の様子


  • word-wrap:break-word; 設定時の動作

    設定 word-wrap:break-word; での
    各ブラウザの動作一覧表
         
        文
        字
    ブラウザ\

























    IE9
    Chrome
    Sfari(Win)
    FireFox
    Opera

    記号の改行の仕方に若干差があるものの確認したすべてのブラウザで改行されています。

    word-wrap:break-word; 適用の様子

▼サンプルソースコード

動作確認に使用したコードです。


▽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>
[ 2012/09/09 13:58 ] HTML・CSS | TB(0) | CM(0)
SPONSORED LINK
人気ブログランキング
トラックバック
この記事のトラックバックURL
http://8cmp.blog.fc2.com/tb.php/43-c6831794

コメントの投稿












管理者にだけ表示を許可する
▲ページトップ