ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用してテーブルまたはセルを制御し、英語の単語や Chinese_Experience の交換によってテーブルが拡大されるのを防ぐために改行を強制します。

CSS を使用してテーブルまたはセルを制御し、英語の単語や Chinese_Experience の交換によってテーブルが拡大されるのを防ぐために改行を強制します。

WBOY
WBOYオリジナル
2016-05-16 12:04:142213ブラウズ
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
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。