div+CSSで長い英語文字を自動的に折り返すにはどうすればよいですか? _html/css_WEB-ITnose

自動行折り返しの問題。通常の文字の行折り返しはより合理的ですが、連続した数字や英語の文字はコンテナを引き伸ばすことが多く、これは非常に面倒です。 CSS が行折り返しを実装する方法は次のとおりです

最高の CSS 定義 行折り返しコード

.wrap { table-layout:fixed; overflow:hidden; }
div、p などのブロックレベルの要素の場合
(アジアのテキストと非アジアのテキスト) 要素にはデフォルトのwhite-space:normalがあり、定義された幅の後で自動的に折り返されます
html

通常のテキスト(アジアのテキストと非アジアのテキスト)要素はデフォルトのwhite-space:normalです定義

css
#wrap{white-space:normal; width:200px; }

1. (IE ブラウザ) 連続する英語文字とアラビア数字の場合は、word-wrap: Break-word; を使用します。 Break: BREAK-ALL; 強制切断の実装

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

} BCDEFGHIJKLMNABCDEFGHIJKLMN1111111111

: 改行を実現できます

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

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

効果: コンテナは正常で、コンテンツは非表示になります

テーブルの場合

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

abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss

2 table-layout を使用します。固定; 幅を強制します。テーブル、内層 td,th は word-break:break-all; または word-wrap:break-word; linebreak を採用します 効果: td,th のネストされた div で改行が可能です

効果: 余分なコンテンツを非表示にします

3. p などは、前述の div と p の改行メソッドを使用します

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

効果: コンテンツ以外のものを非表示にします

abcdefghigklmnopqrstuvwxyz1234567890

5. (Firefox ブラウザ) div、p などを td、th などにネストします。 Firefox の場合は上記の方法を使用します

コードボックスを実行します

最後に、この現象が発生する可能性は非常に低いですが、ネチズンのいたずらも排除できない。

以下は、前述の例の効果です

div すべてのwhite-space:normal; WIDTH 属性がセルのアンラップされたコンテンツよりも小さい値に設定されている td 要素では、たとえ noWrap であっても Wordwrap が発生します。したがって、このシナリオでは WIDTH 属性が noWrap プロパティよりも優先されます。 IE word-wrap : Break-word ; Firefox/word-ブレーク: ブレークオール: 自動;

IE word-break:break-all; n111111111

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss

テーブルレイアウト:固定; ワードブレイク : ワードラップ : ワードブレイク ;

abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

FF テーブル レイアウト: 修正されました。 ;

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890