HOME > 開発者向けBLOG > Webデザイン >  半角英数字で突き抜ける現象を防止

Technology Note 開発者向けBLOG

Webデザイン

半角英数字で突き抜ける現象を防止

こんにちは、ゼノフィ渡部です。

半角英数字が連続した場合に、突き抜ける現象を防止する方法をご紹介いたします。

まず、ブロック要素である「div.box」に幅を指定します。div内にあるp要素の「p.beak」に「word-wrap: break-word;」プロパティを指定します。「word-wrap」は単語の途中で改行するかどうかを指定するもので、「break-word」で改行するようにしています。

1
2
3
4
5
6
7
8
9
10
11

div.box {
  width: 300px; /* 幅を指定 */
  margin: 0 0 40px;
  padding: 10px;
  border: 1px solid #CCC;
  background: #EFEFEF;
}
 
div.box p.break {
  word-wrap: break-word; /* 単語の途中でも改行 */
}

半角英数字が連続した場合に、突き抜けるパターンと、改行するパターンのソースを記述しています。Firefoxなど、他のブラウザが背景を指定している場所を突き抜けていくのに対して、IE6はdivごと伸びる現象が起こります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- 突き抜ける例 -->
<p>
    突き抜ける(IE6はdivごと伸びます。)
</p>
<div class="box">
    <p>
        abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789
    </p>
</div>
<!-- /突き抜ける例 -->
 
<!-- 改行する例 -->
<p>
    改行する
</p>
<div class="box">
    <p class="break">
        abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789
    </p>
</div>
<!-- /改行する例 -->

「word-wrap: break-word;」によって、連続した半角英数字でも改行していることがサンプルを見るとわかります。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

p {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
}
 
div.box {
  width: 300px; /* 幅を指定 */
  margin: 0 0 40px;
  padding: 10px;
  border: 1px solid #CCC;
  background: #EFEFEF;
}
 
div.box p.break {
  word-wrap: break-word; /* 単語の途中でも改行 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- 突き抜ける例 -->
<p>
    突き抜ける(IE6はdivごと伸びます。)
</p>
<div class="box">
    <p>
        abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789
    </p>
</div>
<!-- /突き抜ける例 -->
 
<!-- 改行する例 -->
<p>
    改行する
</p>
<div class="box">
    <p class="break">
        abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789abcdefg0123456789
    </p>
</div>
<!-- /改行する例 -->

<

>

PAGETOP