自動行折り返しの問題、通常の文字の行折り返しは合理的ですが、連続した数字や英語文字はコンテナを拡張することが多く、これは非常に面倒です。 以下は、CSS が行折り返しを実装する方法です。
code.wrap
{テーブルレイアウト:固定; ワードブレイク: オーバーフロー: 非表示;
ここでオーバーフロー: 非表示または自動。
================================================= ===============
div や p などのブロック レベルの要素の場合、通常のテキスト (アジア テキストおよび非アジア テキスト) 要素の行折り返しにはデフォルトの空白 (normal) があり、定義された幅の後で自動的に折り返されます。
html
<div id="wrap">通常のテキストの折り返し (アジア言語および非アジア言語のテキスト) 要素は、定義されている場合、デフォルトのwhite-space:normal になります</div>
css
#wrap{white-space:normal; width:200px; }
1. (IE ブラウザ) 連続した英数字の場合は、word-wrap:break-word; または word-break:break-all; を使用します。
#wrap{ワードブレイク:ブレイクオール幅:200ピクセル;}
を破る
または
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
効果: 改行が可能になります。
2. (Firefox ブラウザ) 連続した英字とアラビア数字の改行Firefox のすべてのバージョンではこの問題は解決されません。境界を越えて文字を非表示にするか、コンテナにスクロール バーを追加することしかできません。
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
効果: コンテナは正常で、テーブルの
コンテンツは非表示になります。
http://www.knowsky.com/
1. (IE ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制し、余分なコンテンツを非表示にします
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
効果: 冗長なコンテンツを非表示にします。
2. (IE ブラウザ) table-layout:fixed を使用してテーブルの幅を強制し、内側の TD を使用します。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>
</table>
効果: 行の折り返しが可能です。
3. (IE ブラウザ) td に div、p などを入れ子にし、上記の div と p の行折り返しメソッドを使用します
。 4. (Firefox ブラウザ) table-layout を使用します: 修正; テーブルの幅、内側の td を強制するには、word-break: Break-all; または word-wrap: Break-word; を使用して、余分なコンテンツを非表示にします。 ; ここでは機能しません
<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>
</table>
効果: コンテンツ以外を非表示にする
5. (Firefox ブラウザー) divs、p などを td、th に入れます。 Firefox でコード ボックスを実行するには、上記の方法を使用します。発生する可能性は非常に小さいですが、ネチズンによるいたずらの可能性は否定できません。
以下は、前述の例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
の効果です
。dtd ">
<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>
<h1><code>IE word-wrap : Break-word ;</code></h1>
<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>
<h1><code>Firefox/ word-break:break-all; </code></ h1>
<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>