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

.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

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

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

.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.

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

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

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

.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 :

.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 :

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!