CSS自動行折り返し_CSS/HTML

英語や数字を連続するとコンテナが拡大してしまい、コンテナのサイズに合わせて自動的にラップできないことは誰もが知っています。CSS でそれらをラップする方法を紹介します。
div
の場合 1. (IE ブラウザ)white-space:normal; ここでの前者は標準に従います。

#wrap{white-space:normal; width:200px; }
または
#wrap{word-break:break-all;width:200px;}

ddd111111111111111111111111111111111

効果: 改行が可能

2. word-break:break-all;overflow:hidden;同じFFにはスクロールバーを隠すか追加するしか方法がありません。もちろん、スクロールバーは追加しない方が良いです。

#wrap{white-space:normal; width:200px; overflow:auto;}
または
#wrap{word-break:break-all;width:200px; }

DDD11111111111111111111111111111111111111111

効果: テーブル

1 のコンテナーは正常で、コンテンツは非表示になります

1. (IE ブラウザー) ) table-layout:fixed;

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890




効果:改行は可能です
2. (IE ブラウザ) table-layout:fixed および nowrap スタイルを使用します

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

効果:

3 をラップできます (IE ブラウザ) パーセンテージを使用する場合はスタイル table-layout:fixed および nowrap


.tb{table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890
効果: 両方の tds が通常どおりラップされます 4. (Firefox ブラウザ) td サイズを固定するためにパーセンテージを使用する場合はスタイル table-layout:fixed および nowrap を使用し、div

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

ここでのセル幅はパーセンテージとして定義する必要があります効果: 通常の表示ですが、折り返すことはできません (注: FF の下でコンテナのコンテンツを折り返す良い方法はありません。全体的な効果への影響を避けるために、オーバーフローを使用して余分なコンテンツを非表示にすることしかできません)