CSS は自動行折り返しを実装します

英語や数字を連続するとコンテナが拡大し、コンテナのサイズに応じて自動的にラップできないことは誰もが知っています。CSSを使用してそれらをラップする方法を紹介します。

ディビジョン用

1.（IE ブラウザ）white-space:normal; word-break:break-all; 前者は標準に従います。

#wrap{空白:通常の幅:200px;

または

#wrap{ワードブレイク:ブレイクオール;幅:200ピクセル;}

<div >ddd1111111111111111111111111111111111</div>

効果: 改行を実現できます。

2. （Firefox ブラウザ）white-space:normal; word-break:break-all;overflow:hidden; FF にはスクロール バーを隠すか追加することしかできませんが、もちろんスクロール バーはありません。効果がさらに良くなりました！

#wrap{空白:通常の幅:200px;}

または

#wrap{ワードブレイク:ブレイクオール;幅:200ピクセル;

<div >ddd111111111111111111111111111111111111111</div>

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

テーブル用

1. (IE ブラウザ) スタイル table-layout:fixed を使用します。

効果: 改行を行うことができます

2. (IE ブラウザ) スタイル table-layout を使用します:fixed および nowrap

効果: 改行を行うことができます

3. (IE ブラウザ) パーセンテージを使用して TD サイズを固定する場合は、スタイル table-layout:fixed および nowrap を使用します。

効果: 両方の TD が通常どおりラップされます。

4. (Firefox ブラウザ) パーセンテージを使用して td サイズを固定する場合は、スタイル table-layout:fixed および nowrap を使用し、div を使用します。

ここでのセル幅はパーセンテージとして定義する必要があります

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