La différence entre le saut de mot, le retour à la ligne et l'espace blanc en CSS

Un exemple de la différence entre le saut de mot, le retour à la ligne et l'espace blanc en CSS. Les amis qui en ont besoin peuvent se référer au

code HTML pour tester

<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>复制代码

Le code est le suivant :

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

Si le contenu est une longue chaîne anglaise, IE6 ouvrira le conteneur, tandis que les autres navigateurs ne feront que déborder mais ne l'ouvriront pas

Le code est le suivant :

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

Les longues chaînes anglaises ne peuvent pas être enveloppées dans Firefox

Le code. est la suivante :

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

Sous IE6, les longs caractères anglais et les longues phrases chinoises ouvriront le conteneur, et IE7 et IE8 débordera directement Sous Firefox, seules les longues chaînes anglaises déborderont.

Le code est le suivant :

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

C'est le même que le premier cas

Le code est le suivant :

<🎜. >

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

Tous Les navigateurs ont tous changé de ligne
Le code est le suivant :

Identique au premier cas

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

Le le code est le suivant :

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

Tous ouverts sous IE6, tous débordent sous IE7, IE8 et Firefox
Le code est le suivant :

Identique à 7

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois !

Recommandations associées :

css Explication du fond : transparent en

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!