数字と文字によってコンテナが大きくなる問題を解決する

自動行折り返しの問題、通常の文字の行折り返しは合理的ですが、連続した数字や英語文字はコンテナを拡張することが多く、これは非常に頭の痛い問題です。 CSS で行折り返しを実装する方法は次のとおりです。

div や p などのブロック レベルの要素の場合、通常のテキスト (アジア テキストおよび非アジア テキスト) 要素の行折り返しにはデフォルトの空白 (normal) があり、定義された幅の後で自動的に折り返されます。
html

css
#wrap{空白:通常の幅:200px;

1. (IE ブラウザ) 連続した英語文字とアラビア数字の場合は、word-wrap:break-word; または word-break:break-all; を使用して強制改行を実行します。
#wrap{ワードブレイク:ブレイクオール幅:200ピクセル;}
または
#wrap{ワードラップ:ブレイクワード幅:200px;}

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

2. (Firefox ブラウザ) 連続する英語文字とアラビア数字の改行は、境界を超える文字を非表示にするか、コンテナにスクロール バーを追加することしかできません。

#wrap{ワードブレイク:ブレイクオール幅:200ピクセル;}

効果: コンテナーは正常で、コンテンツはテーブルに対して非表示になります。
(1) (IE ブラウザ) table-layout:fixed を使用してテーブルの幅を強制し、余分なコンテンツを非表示にします。





効果: 冗長なコンテンツを非表示にする
(2) (IE ブラウザ) table-layout:fixed を使用してテーブルの幅を強制し、word-break:break-all または word-wrap:break-word を使用します。

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

効果: 改行を行うことができます

3. (IE ブラウザの場合) td、th に div、p などをネストする場合は、前述の div、p の行折り返し方法を使用します。

4. (Firefox ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、内側の TD を使用します。word-wrap:break-word; を使用します。 hidden; 非表示にする場合、ここでは overflow:auto は機能しません。

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

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

5. (Firefox ブラウザ) td、th などに div、p などを入れます。Firefox の場合は上記の方法を使用します。

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890