自動行折り返しの問題。通常の文字の行折り返しはより合理的ですが、連続した数字や英語の文字はコンテナを拡張することが多く、これは非常に面倒です
div の場合、ブロックレベルの要素。 p
通常のテキスト (アジアのテキストと非アジアのテキスト) 要素の行折り返しにはデフォルトのwhite-space:normalがあり、定義された幅の後に自動的に折り返されます
html
通常のテキスト(アジアのテキストと非アジアのテキスト) の行折り返し非アジアのテキスト) Text) 要素には、定義されている場合、デフォルトのwhite-space:normal があります
css
#wrap{white-space:normal; width:200px; (IE ブラウザ) 連続した英語文字の場合アラビア数字は、word-wrap :break-word; または word-break:break-all; を使用して強制改行を実装します
or
#wrap{ word-wrap:break- word; width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
効果: 改行を実現できます
2. (Firefox ブラウザー) 連続した英語文字とアラビア数字の改行、Firefox のすべてのバージョンではこの問題は解決されていません。問題は、境界を超える文字を非表示にするか、コンテナにスクロール バーを追加するだけです
#wrap
{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
効果: コンテナーは正常で、コンテンツは非表示になります
テーブル
1 の場合、table-layout:fixed; を使用してテーブルの幅を強制し、余分なコンテンツを非表示にします
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssす
|
効果: 冗長なコンテンツを非表示にする
2. (IE ブラウザ) table-layout:fixed; を使用してテーブルの幅を強制します。内部の TD は word-break:break-all を使用します。 ; またはワードラップ: ブレークワード;
効果:
3 をラップできます (IE ブラウザ) div、p、をネストします。 td、th などでは、前述の div と p の行折り返し方法を採用します
4. (Firefox ブラウザー) table-layout:fixed を使用して、テーブル、内部 td、th の選択範囲を強制します。 word-break:break-all; または word-wrap:break-word; 改行を使用します。| overflow:hidden;コンテンツを超えて非表示にします。ここでは overflow:auto; は機能しません |
|
abcdefghigklmnopqrstuvwxyz1234567890
abcdefghigklmnopqrstuvwxyz1234567890
効果: コンテンツ以外を非表示にする
5. (Firefox ブラウザー) td、th に div、p などをネストし、上記の方法を使用して Firefox に対処します
コードボックス 100 を実行します。マテリアルネットワーク最後に、この現象が発生する可能性は非常に低いですが、ネチズンのいたずらを排除することはできません。
ご質問がございましたら、以下にメッセージを残してください |
以下は、前述の例の効果です<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行
</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that
has its WIDTH attribute set to a value smaller than the unwrapped content of the cell,
even if the noWrap property is set to true. Therefore, the WIDTH attribute takes
precedence over the noWrap property in this scenario</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; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijkl
mn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</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 ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF table-layout:fixed; overflow:hidden;</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>
</table>
</body>
</html> |
