自動行折り返しの問題。通常の文字の行折り返しはより合理的ですが、連続する数字や英語の文字はコンテナを拡張することが多く、これは非常に面倒です。 CSS が行折り返しを実装する方法は次のとおりです
div、p ブロックレベル要素の場合。
通常のテキストの折り返し (アジアのテキストと非アジアのテキスト) 要素にはデフォルトのwhite-space:normalがあり、定義された幅の後で自動的に折り返されます
html
css
#wrap{white-space:normal width:200px; }
1 (IE ブラウザ) 連続した英語文字とアラビア数字の場合は、word-wrap:break-word; または word-break:break-all; を使用して、強制改行を実現します。 }
or#wrap{word-wrap:break-word; width:200px;}
2 (Firefox ブラウザ) 連続した英語文字とアラビア数字が壊れています。Firefox のすべてのバージョンでは、境界を越えた文字を非表示にするか、コンテナにスクロール バーを追加することしかできません。 -all; width:200px; overflow:auto;}
テーブル
のコンテンツは非表示になります1 . (IEブラウザ デバイス) table-layout:fixed を使用して表の幅を強制し、余分なコンテンツを非表示にします
abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss
|
効果: 冗長なコンテンツを非表示にする
2. (IE ブラウザ) table-layout:fixed を使用してテーブルの幅を強制します。 td,th は word-break を使用します
改行
3. (IE ブラウザ) td, th で div、p などをネストする場合は、前述の div、p の行折り返し方法を使用します
4. Firefox ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、内部 TD を使用します。word-break:break-all または word-wrap:break-word; を使用します。余分なコンテンツを非表示にするための overflow:auto; はここでは機能しません
abcdefghigklmnopqrstuvwxyz1234567890 | abcdefghigklmnopqrstuvwxyz1234567890 td>
|