でんきかいでん.com

正当なCSSです!

自作データを無料配しています。

「プリント基板エディタPasS」用の基板・パーツ画像(BMP形式)

自作3Dデータなど。

Twitter Blog 質問箱 TOP PasS Profile 便利技
top > useful > prohibited

更新日:

禁則処理

CSSで指定する禁則処理とは、どこで改行するか。

というルール。


word-break: keep-all;
word-break: normal;
word-break: break-all;


普通の文章の場合は(英語でも日本語でも)'word-break:normal;'で特に問題はないが、「HTMLのコードなど」を特殊文字を使って見える化した場合は改行されないので、'break-all'にする必要があるようだ。


'break-all'だけでは改行されないこともあるようなので、そういう場合は'word-wrap'の'break-word'を併用すると解決できる。



- テスト01 - - テスト02 -



テスト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 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">
・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">
・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">

文章中では改行をしていない。

日本語と英語との切れ目でだけ改行している。


・keep-all は、chromeの場合は日本語であっても文章の切れ目で改行される。しかしFireFox、IE11、Edgeの場合は改行されず、枠外に飛び出している。ブラウザによって解釈が違うようだ。


・break-all は、英単語の途中でも改行されている。


製作3D 無料3D TOP Sitemaps