更新日：
禁則処理
CSSで指定する禁則処理とは、どこで改行するか。
というルール。
word-break: keep-all;
word-break: normal;
word-break: break-all;
普通の文章の場合は（英語でも日本語でも）'word-break:normal;'で特に問題はないが、「HTMLのコードなど」を特殊文字を使って見える化した場合は改行されないので、'break-all'にする必要があるようだ。
'break-all'だけでは改行されないこともあるようなので、そういう場合は'word-wrap'の'break-word'を併用すると解決できる。
テスト02の検証内容で確認できる。
word-wrap: normal;
word-wrap: break-word;
- keep-all は、単語の切れ目でしか改行しない。切れ目がないと範囲から飛び出す場合もある。
- normal は、英語の場合は単語の切れ目で改行される。日本語の場合は単語の途中でも改行される。
- break-all は、英語も日本語も単語の途中でも改行される。
・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 Nyana 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">
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
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 Nyana 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">
・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 Nyana 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">
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
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 Nyana 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">
・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 Nyana 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">
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
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 Nyana 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">
文章中では改行をしていない。
日本語と英語との切れ目でだけ改行している。
・keep-all は、chromeの場合は日本語であっても文章の切れ目で改行される。しかしFireFox、IE11、Edgeの場合は改行されず、枠外に飛び出している。ブラウザによって解釈が違うようだ。
・break-all は、英単語の途中でも改行されている。