CSS が英語と連続数字の自動行折り返しを実装する方法の詳細な説明

p や p などのブロックレベル要素の場合

通常のテキスト行の折り返し (アジアのテキストと非アジアのテキスト) 要素には、デフォルトの空白:normal があり、定義された幅の後で自動的に折り返されます:

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

1. (IE ブラウザ) 連続した英語文字とアラビア数字、強制改行を実現するには、word-wrap:break-word; または

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

を使用します。達成しました

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

テーブルの場合

1. (IEブラウザ) use table-layout:fixed; テーブルの幅を強制すると、余分なコンテンツが非表示になります

#wrap{word-wrap:break-word; width:200px;}
　　<p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>

効果: 余分なコンテンツを隠す

2. (IE ブラウザ) use table -layout:fixed; テーブルの幅を強制し、内側の td を使用します。 Break

#wrap{word-break:break-all; width:200px; overflow:auto;}
　　<p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>

効果:改行可能

3. (IEブラウザ) td, thにp, pなどをネストするには、上記のp, pの行折り返し方法を使用します

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

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

効果: コンテンツ以外を非表示にする

5 .(Firefox ブラウザ) td、th に p、p などをネストし、上記の方法を使用します。コードボックスを実行するにはFirefoxを使用してください。最後に、これが起こる可能性は非常に低いです。

以上がCSS が英語と連続数字の自動行折り返しを実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。