ホームページ >ウェブフロントエンド >htmlチュートリアル >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; }
#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
効果: 余分なコンテンツを非表示にします |
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;IE word-break:break-all; n111111111 | Firefox/word-ブレーク: ブレークオール: 自動;abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 |
テーブルレイアウト:固定; ワードブレイク : ワードラップ : ワードブレイク ;
abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss
FF テーブル レイアウト: 修正されました。 ;
abcdefghigklmnopqrstuvwxyz1234567890
abcdefghigklmnopqrstuvwxyz1234567890