ホームページ > 記事 > ウェブフロントエンド > Web ページのコンテンツを自動的にラップする CSS を実装する方法

Web ページのコンテンツを自動的にラップする CSS を実装する方法

黄舟オリジナル: 2016-12-14 16:50:271478ブラウズ

数値を使用するとコンテナが引き伸ばされてしまい、コンテナのサイズに応じて自動的に折り返せない場合があります。CSS を使用して数値を折り返す方法は次のとおりです。

div

1. (IE ブラウザ)white-space:normal; word-break:break-all; の場合、前者は標準に従います。 #Wrap {White-SPACE: NORMAL; width: 200px;}

または

#wrap {Word-Bream: Bream-ALL; width: 200px;}

& lt; div id = "wrap" & gt; ;/ div>

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

2. (Firefox ブラウザー) White-space:normal; word-break:break-all;overflow:hidden; 同じ FF の下では、適切な実装方法がありません。スクロールバーを非表示にするか追加するだけです。もちろん、スクロールバーを追加しない方が効果は高くなります。

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

または

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

ddd111111111111111111111111111111111111

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

テーブル

1 (IE ブラウザー) のスタイル table-layout:fixed;

< を使用します。スタイル(&G) ;

.tb{ table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

< /tr>

効果: 行を折り返すことができます

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

< ;/tr>
< ; /table>

効果: 行を折り返すことができます

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

abcdefghigklmnopqrstuvwxyz 1234567890

効果: 両方の TDS が通常どおりラップします

4. (Firefox ブラウザー)パーセンテージを使用する場合td サイズを修正するには、-layout:fixed と nowrap を使用し、div

abcdefghigklmnopqrstuvwxyz 1234567890

FF の下でコンテナのコンテンツをラップする良い方法はありません。全体的な効果に影響を与えないように、オーバーフローを使用することしかできません。)

その他の関連記事、PHP 中国語 Web サイト (www.php.cn) に注意してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS 上級チュートリアルの疑似要素次の記事：CSS 上級チュートリアルの疑似要素

続きを見る