テスト02 禁則処理　でんきかいでん.com

このページには外部スタイルシートを使わず、CSSリセットもせず、使用したCSSはすべてHTML内に記述して、最小構成で検証している。

・word-break:keep-all;

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
I am a lone cat. There is no name yet.I can not get the idea where I was born. Everything remembers only those who were crying Nyaña at a damp and damp place.

<div class="comi">
  <img src="img/denkikaiden100px.gif" width="100" height="100" alt="image">
</div>
  <img class="mico" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">
  <img class="comi" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">

・word-break:normal;

・word-break:break-all;

・word-wrap:normal;

・word-wrap:break-word;

以下は<code></code>の中に入れた。

ブラウザによって表示の違いを確認するため。

・word-break:keep-all;

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 I am a lone cat. There is no name yet.I can not get the idea where I was born. Everything remembers only those who were crying Nyaña at a damp and damp place. <div class="comi"> <img src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> </div> <img class="mico" src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> <img class="comi" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">

・word-break:normal;

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 I am a lone cat. There is no name yet.I can not get the idea where I was born. Everything remembers only those who were crying Nyaña at a damp and damp place. <div class="comi"> <img src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> </div> <img class="mico" src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> <img class="comi" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">

・word-break:break-all;

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 I am a lone cat. There is no name yet.I can not get the idea where I was born. Everything remembers only those who were crying Nyaña at a damp and damp place. <div class="comi"> <img src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> </div> <img class="mico" src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> <img class="comi" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">

・word-wrap:normal;

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 I am a lone cat. There is no name yet.I can not get the idea where I was born. Everything remembers only those who were crying Nyaña at a damp and damp place. <div class="comi"> <img src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> </div> <img class="mico" src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> <img class="comi" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">

・word-wrap:break-word;

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 I am a lone cat. There is no name yet.I can not get the idea where I was born. Everything remembers only those who were crying Nyaña at a damp and damp place. <div class="comi"> <img src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> </div> <img class="mico" src="img/denkikaiden100px.gif" width="100" height="100" alt="image"> <img class="comi" src="img/denkikaiden100px.gif" width="100" height="100" alt="image">

結果を見ると、「英語の文章」と「特殊文字を使って見える化したHTMLなどのコード」では、扱われ方が違うようだ。

「見える化したコード」に対応させるためには「break-all」にするか、「word-wrap:break-word;」を使った方が良いようだ。

親ページへ戻る