div や p などのブロックレベル要素の場合 通常のテキスト行の折り返し (アジア言語のテキストと非アジア言語のテキスト) 要素にはデフォルトのwhite-space:normal があり、文字列の後で自動的に折り返されます。定義された幅
html
通常のテキストの折り返し(アジアおよび非アジアのテキスト)要素は、定義されている場合、デフォルトのwhite-space:normalになります
css
#wrap{ white-space:normal; width:200px; }
1. (IE ブラウザ) 連続する英字とアラビア数字の場合は、word-wrap:break-word; または word-break:break-all; を使用します。強制改行を実現するには
#wrap{word-break:break-all; width:200px;}
または
#wrap{word-wrap:break-word; width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
効果: 行の折り返しを実現できます
2. (Firefox ブラウザ) 連続した英語文字とアラビア数字の改行。Firefox のすべてのバージョンではこの問題は解決されていません。問題。改行を超えることができるのは境界文字を非表示にするか、コンテナにスクロール バーを追加する
#wrap{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
効果: コンテナは正常で、コンテンツは非表示になります
テーブル
1. (IE ブラウザ) を使用します table-layout:fixed; の幅を強制しますテーブルに追加され、余分なコンテンツは非表示になります。
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
|
効果: 非表示の余分なコンテンツ
2. (IE ブラウザ) table-layout: fixed を使用して、テーブルの幅を強制するために、内側の td を使用します。ワードブレイク: ブレークオール; またはワードラップ: ブレークワード; 改行
abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz 1234567890 |
効果: 行の折り返しが可能
3. (IE ブラウザ) td で div、p などをネストすると、th は使用します。上記の div と p の行折り返し方法
4. (Firefox ブラウザ) table -layout:fixed; を使用します。テーブルの幅、内側の td を強制し、th は word-break:break-all; または word- を使用します。 Wrap: Break-Word; 行を折り返す、overflow:hidden を使用; 余分なコンテンツを非表示にする、ここでは overflow:auto; 動作しません
abcdefghigklmnopqrstuvwxyz1234567890 |
abcdefghigklmnopqrstuvwxyz1234567890 |