CSSコントロールテキストの自動折り返し-CSSチュートリアル-php.cn

CSSコントロールテキストの自動折り返し

高洛峰

リリース： 2016-10-12 10:33:42

オリジナル

1413 人が閲覧しました

自動行折り返しの問題。通常の文字の行折り返しはより合理的ですが、連続した数字や英語の文字はコンテナを拡張することが多く、これは非常に面倒です

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

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

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>

ログイン後にコピー