ん~、違いがようわからん。

テキストがボックスからはみ出る

上記3プロパティの動作確認用ページ (ポップアップで開く)
Firefoxはどれを指定しても、連続した半角英数が長いとtableが伸びちゃうなぁ。

以下、自分の解釈メモ ( なので正しいかどうか怪しいです )。

word-break

禁則処理の設定?
break-allにすると日本語の文章中どこでも折り返して、アルファベットもどこでも折り返す。
選べる値

  • normal
  • keep-all
  • loose
  • break-strict
  • break-all

word-wrap

英単語の折り返し、break-wordで英単語中でも折り返す。
日本語は関係ない?
選べる値

  • normal
  • break-word

white-space

半角スペース、タブ、改行の処理
pre-wrapだと、基本動作はpre(半角スペース、タブ、改行はそのまま生かされる)でボックスの幅で改行する。
選べる値

  • normal
  • pre
  • nowrap
  • pre-wrap
  • pre-line

ブロックレベル要素を勝手に拡張したり、ハミ出したりしないかチェック

*色の意味

  • 自動で折り返す指定
  • 二つ同時に指定すると折り返す
  • 勝手に拡張したりハミ出したり
<pre>
  word-break : break-all ; word-wrap : break-word ; white-space : pre-wrap ;
firefox 3.6.3 ×アドレス
×日本語
×アルファベット
×アドレス
×日本語
×アルファベット
×アルファベット
chrome 5.0.375 ×アドレス
×日本語
×アルファベット
ok ×アルファベット
safari 4.0.5 ×アドレス
×日本語
×アルファベット
ok ×アルファベット
opera 10.53 ×日本語
×アルファベット
ok ×アルファベット
IE6 ×日本語
×アルファベット
ok ×日本語
×アルファベット
IE7 ×日本語
×アルファベット
ok ×日本語
×アルファベット
IE8 ×日本語
×アルファベット
ok ×アルファベット
<div>
  word-break : break-all ; word-wrap : break-word ; white-space : pre-wrap ;
firefox 3.6.3 ×アルファベット ok preになる
×アルファベット
chrome 5.0.375 ok ok preになる
×アルファベット
safari 4.0.5 ok ok preになる
×アルファベット
opera 10.53 ×アルファベット ok preになる
×アルファベット
IE6 ok ok アルファベット分伸びるけど他はwidthの位置で折り返してる
IE7 ok ok ×アルファベット
IE8 ok ok preになる
×アルファベット
<table>
  word-break : break-all ; word-wrap : break-word ; white-space : pre-wrap ;
firefox 3.6.3 アルファベットに合わせて伸びる アルファベットに合わせて伸びる アルファベットに合わせて伸びる
chrome 5.0.375 ok アルファベットに合わせて伸びる アルファベットに合わせて伸びる
safari 4.0.5 ok アルファベットに合わせて伸びる アルファベットに合わせて伸びる
opera 10.53 アルファベットに合わせて伸びる ok アルファベットに合わせて伸びる
IE6 ok アルファベットに合わせて伸びる アルファベットに合わせて伸びる
IE7 ok アルファベットに合わせて伸びる アルファベットに合わせて伸びる
IE8 ok アルファベットに合わせて伸びる アルファベットに合わせて伸びる

崩さないようにする指定は

今のところtableはcssだけじゃ無理っぽい(Firefoxが)。
preには word-wrap: break-word; と white-space: pre-wrap; (二つ指定しないとFirefoxでハミ出す)
divにも指定するとしたら word-wrap: break-word; のみがいいのかな?

もし、はみ出しちゃった時の為にoverflowを追加しておいてもいいみたい。
優しい人がいるもんだ。


6 thoughts on “自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。

  1. ピンバック: Elec Days

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.