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

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

上記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×アルファベットokpreになる
×アルファベット
chrome 5.0.375okokpreになる
×アルファベット
safari 4.0.5okokpreになる
×アルファベット
opera 10.53×アルファベットokpreになる
×アルファベット
IE6okokアルファベット分伸びるけど他はwidthの位置で折り返してる
IE7okok×アルファベット
IE8okokpreになる
×アルファベット
<table>
 word-break : break-all ;word-wrap : break-word ;white-space : pre-wrap ;
firefox 3.6.3アルファベットに合わせて伸びるアルファベットに合わせて伸びるアルファベットに合わせて伸びる
chrome 5.0.375okアルファベットに合わせて伸びるアルファベットに合わせて伸びる
safari 4.0.5okアルファベットに合わせて伸びるアルファベットに合わせて伸びる
opera 10.53アルファベットに合わせて伸びるokアルファベットに合わせて伸びる
IE6okアルファベットに合わせて伸びるアルファベットに合わせて伸びる
IE7okアルファベットに合わせて伸びるアルファベットに合わせて伸びる
IE8okアルファベットに合わせて伸びるアルファベットに合わせて伸びる

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

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

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


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

  1. ピンバック: Elec Days

コメントを残す

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

You can add images to your comment by clicking here.