CSS は自動行折り返しを実現し、div が壊れてレイアウトに影響を与えるのを防ぎます。

自動行折り返し問題。通常の文字の行折り返しは合理的ですが、連続した数字や英文字はコンテナを拡張することが多く、これは非常に面倒です

p、p、その他のブロックのレベル要素
通常のテキストの折り返し (アジアのテキストと非アジアのテキスト) 要素には、デフォルトのwhite-space:normalがあり、定義された幅
html

< id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义< /p >

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;}

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >

効果: 改行を実現できます

2. (Firefox ブラウザー) 連続した英語文字とアラビア数字の改行、すべてFirefox のバージョンでは、この問題は解決されていません。境界を越えて文字を非表示にするか、コンテナにスクロール バーを追加することしかできません

#wrap{word-break:break-all; width:200px; overflow:auto;}

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >

効果: コンテナは通常であり、テーブル

1 のコンテンツは非表示になります

。 (IE ブラウザー) table-layout:fixed を使用してテーブルの幅を強制し、余分なコンテンツを非表示にします

2. (IE ブラウザー) table-layout:fixed を使用して、テーブルの幅を強制します。テーブルの幅と内側の td は、word-break: Break-all; または word-wrap: Break-word; を使用します

< style="table-layout:fixed" width="200">
<>
<>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
< /td >
< /tr >
< /table >

効果: 改行が可能です

3. p をネストする場合。 , p などを td, th に挿入し、上記の p, p の改行メソッドを使用します

4. (Firefox ブラウザ) table-layout:fixed を使用してテーブルの幅を強制し、内部の td, th は Word を使用します。 -break: Break-all; または word-wrap: Break-word ;改行、overflow:hidden; を使用して、ここでは overflow:auto; は機能しません

< width="200" style="table-layout:fixed;">
<>
< width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
< /td >
< style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
< /td >
< /tr >
< /table >

効果: コンテンツ以外のものを非表示にします

5. (Firefox ブラウザ) td、th、p などの Nest p は、Firefox に対応するために上記の方法を採用します

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

マウスがホバーされているときに CSS を使用してマスクレイヤーを実装する方法

CSS を使用して複数行および複数列のレイアウトを実装する方法について

CSS の使用方法タイトルテキストの長文部分に省略記号を表示するには

以上がCSS は自動行折り返しを実現し、div が壊れてレイアウトに影響を与えるのを防ぎます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。