ん～、違いがようわからん。
上記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
ブロックレベル要素を勝手に拡張したり、ハミ出したりしないかチェック
*色の意味
- 自動で折り返す指定
- 二つ同時に指定すると折り返す
- 勝手に拡張したりハミ出したり
| 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 | ×アルファベット |
| 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になる ×アルファベット |
| 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; のみがいいのかな?
pre{
word-wrap: break-word;
white-space: pre-wrap;
}
div{
word-wrap: break-word;
}
もし、はみ出しちゃった時の為にoverflowを追加しておいてもいいみたい。
優しい人がいるもんだ。
overflow:auto;
関連記事かもしれん:
乱雑モックアップのフィード
[...] http://blog.sakurachiro.com/2010/06/control-break/#content [...]
ピンバック by やっぱり楽しいWordPress — 2010年12月14日 @ 21:55
[...] なかった↓自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 [...]
ピンバック by 徒然 - 時間がないのでリンクで済ませる備忘録。Web作成編 — 2011年2月16日 @ 23:06
[...] 行がうまくいかないことでした。参照 → 自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 | 乱雑モックアップ [...]
ピンバック by 徒然 - ブラウザをJavaScriptで判別して対処したときの備忘録 — 2011年4月1日 @ 13:33
FC2ブログでの、タグの自動折り返し
<pre>タグは、HTMLのなかで
「成形済みテキストであることを表すタグ」
ということになっています。
これはどういうことかというと、<pre>タグで表示させたい文字列を囲め…
トラックバック by Elec Days — 2011年11月3日 @ 12:50