自動行折り返しの問題、通常の文字の行折り返しは合理的ですが、連続した数字や英語文字はコンテナを拡張することが多く、これは非常に頭の痛い問題です。 CSS で行折り返しを実装する方法は次のとおりです。
div や p などのブロックレベルの要素の場合、通常のテキストの折り返し (アジアのテキストと非アジアのテキスト) 要素にはデフォルトのwhite-space:normal があり、定義された幅の後で自動的に折り返されます。
html
<div id="wrap">通常のテキストの折り返し（アジア言語および非アジア言語のテキスト）要素には、定義時にデフォルトのwhite-space:normalが含まれます</div>
css
#wrap{空白:標準幅:200px;
1. (IE ブラウザ) 連続した英語文字とアラビア数字の場合は、word-wrap:break-word; または word-break:break-all; を使用して強制改行を実行します。
#wrap{ワードブレイク:ブレイクオール幅:200ピクセル;}
または
#wrap{ワードラップ:ブレイクワード幅:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
効果: 改行を実現できます。
2. (Firefox ブラウザ) 連続する英語文字とアラビア数字の改行は、境界を超える文字を非表示にするか、コンテナにスクロール バーを追加することしかできません。
#wrap{ワードブレイク:ブレイクオール幅:200ピクセル;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
効果: コンテナーは正常で、コンテンツはテーブルに対して非表示になります。
(1) (IE ブラウザ) table-layout:fixed を使用してテーブルの幅を強制し、余分なコンテンツを非表示にします。
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</テーブル>
効果: 冗長なコンテンツを非表示にする
(2) (IE ブラウザ) table-layout:fixed を使用してテーブルの幅を強制し、word-break:break-all または word-wrap:break-word を使用します。
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : Break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : Break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</テーブル>
効果: 改行を行うことができます
3. (IE ブラウザの場合) td、th に div、p などをネストする場合は、前述の div、p の行折り返し方法を使用します。
4. (Firefox ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、word-break:break-all または word-wrap:break-word; を使用します。 hidden; 非表示にする場合、ここでは overflow:auto は機能しません。
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : Break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : Break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</テーブル>
効果: コンテンツ以外のものを非表示にします
5. (Firefox ブラウザ) td、th などに div、p などを入れます。Firefox の場合は上記の方法を使用します。