ホームページ > 記事 > ウェブフロントエンド > CSS は自動行折り返しを実現し、div が壊れてレイアウトに影響を与えるのを防ぎます。

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

不言オリジナル: 2018-06-21 15:55:542108ブラウズ

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

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 は自動行折り返しを実現し、div が壊れてレイアウトに影響を与えるのを防ぎます。

関連記事