自動行折り返しの問題、通常の文字の行折り返しは合理的ですが、連続した数字や英語文字はコンテナを拡張することが多く、これは非常に頭の痛い問題です。 CSS で行折り返しを実装する方法は次のとおりです。 改行を定義するのに最適な CSS .wrap {テーブルレイアウト:固定; オーバーフロー:非表示; 1. (IE ブラウザ) 連続した英語文字とアラビア数字の場合は、word-wrap:break-word; または word-break:break-all; を使用して強制改行を実行します。 #wrap{ワードブレイク:ブレイクオール幅:200ピクセル;} <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> 効果: 改行を実現できます。 2. (Firefox ブラウザ) 連続する英語文字とアラビア数字の改行は、境界を超える文字を非表示にするか、コンテナにスクロール バーを追加することしかできません。 <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> 効果: コンテナは正常で、コンテンツは非表示になります。 テーブル用 <table style="table-layout:fixed" width="200"> 効果: 冗長なコンテンツを非表示にする 2. (IE ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、内部 TD を使用します。word-break:break-all または word-wrap:break-word; <table width="200" style="table-layout:fixed;"> 効果: 改行を行うことができます 3. (IE ブラウザの場合) td、th に div、p などをネストする場合は、前述の div、p の行折り返し方法を使用します。 4. (Firefox ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、内側の TD を使用します。word-wrap:break-word; を使用します。 hidden; 非表示にする場合、ここでは overflow:auto は機能しません。 効果: コンテンツ以外のものを非表示にします 5. (Firefox ブラウザ) div、p などを td、th などに入れます。上記の方法を使用して Firefox に対処し、コード ボックスを実行します。最後に、この現象が発生する可能性は非常に低いですが、ネチズンの。いたずらも排除できません。 前述の例の効果は次のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h1><code>IE ワードラップ : ブレークワード ;</code></h1> <h1><code>Firefox/word-break:break-all;</code></h1>
ここでオーバーフロー: 非表示または自動。
================================================= ===============
div や p などのブロック レベルの要素の場合、通常のテキスト (アジア テキストおよび非アジア テキスト) 要素の行折り返しにはデフォルトの空白 (normal) があり、定義された幅の後で自動的に折り返されます。
html
<div id="wrap">通常のテキストの折り返し（アジア言語および非アジア言語のテキスト）要素には、定義時にデフォルトのwhite-space:normalが含まれます</div>
css
#wrap{空白:標準幅:200px;
または
#wrap{ワードラップ:ブレイクワード幅:200px;}
#wrap{ワードブレイク:ブレイクオール幅:200ピクセル;}
1. (IE ブラウザ) table-layout:fixed を使用してテーブルの幅を強制し、余分なコンテンツを非表示にします。
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</テーブル>
<tr>
<td width="25%" style="word-break : Break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : Break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</テーブル>
<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>
</テーブル>
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字行の折り返し</title>
<style type="text/css">
table,td,th,div { border:1px 緑色の固体;}
コード { font-family:"Courier New"、Courier、等幅;}
</スタイル>
</head>
<本文>
<h1><code>div</code></h1>
<h1><code>すべて空白:通常;</code></h1>
<div style="white-space:normal; width:200px;">ワードラップは、noWrap プロパティが次のように設定されている場合でも、WIDTH 属性がセルのアンラップされたコンテンツより小さい値に設定されている td 要素で発生します。 true。したがって、このシナリオでは WIDTH 属性が noWrap プロパティより優先されます。</div>
<div style="word-wrap : Break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>テーブル</code></h1>
<h1><code>テーブルレイアウト:固定;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</テーブル>
<h1><code>テーブル レイアウト:固定; ワード ブレーク : ワードラップ : ブレーク ワード;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : Break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : Break-word ;">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss</td>
</tr>
</テーブル>
<h1><code>FF テーブル レイアウト: 固定; </code></h1>
<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>
</テーブル>
</body>
</html>