CSS のワードブレーク、ワードラップ、ホワイトスペースの違い

CSS のワードブレーク、ワードラップ、ホワイトスペースの違いの例。必要な友人は、

テスト用の HTML コードを参照してください

<p class="c1">safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</p>
<p class=c1>This is all English. This is all English. This is all English.</p>
<p class=c1>全是中文的情况。全是中文的情况。全是中文的情况。</p>
<p class=c1>中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.</p>复制代码

コードは次のとおりです:

.c1{ width:300px;word-break:normal;border:1px solid red;}[object Object]

Ifコンテンツは長い英語文字列です。文字列が使用されている場合、IE6 はコンテナーを開きますが、他のブラウザーはオーバーフローするだけでコンテナーは開きません。

コードは次のとおりです。

.c1{ width:300px;word-break:break-all;border:1px solid red;}

長い英語文字列はラップできません。 Firefox の場合

コードは次のとおりです。

.c1{ width:300px;word-break:keep-all;border:1px solid red;}

IE6 では、長い英語の文字列と長い中国語の文がコンテナを開きますが、IE7 と IE8 では、長い英語の文字列のみが直接オーバーフローします。溢れてしまいます。

コードは次のとおりです:

.c1{ width:300px;word-wrap:normal;border:1px solid red;}

これは最初のケースと同じです

コードは次のとおりです:

.c1{ width:300px;word-wrap:break-word;border:1px solid red;}

すべてのブラウザに改行があります:

.c1{ width:300px;white-space:normal;border:1px solid red;}

すべてIE6で開きます、IE7、IE8、Firefoxではすべてオーバーフローします

コードは次のとおりです:

.c1{ width:300px;white-space:pre;border:1px solid red;}

7と同じ
上記はこの記事の全内容です、皆さんの学習に役立つことを願っています、ご注意くださいその他の関連コンテンツについては、PHP 中国語 Web サイトにアクセスしてください。
関連する推奨事項:

css 背景の説明:透明

以上がCSS のワードブレーク、ワードラップ、ホワイトスペースの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。