Der Unterschied zwischen Wortumbruch, Zeilenumbruch und Leerzeichen in CSS

Ein Beispiel für den Unterschied zwischen Wortumbruch, Zeilenumbruch und Leerzeichen in CSS. Freunde, die es benötigen, können sich zum Testen auf den

HTML-Code beziehen

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

Der Der Code lautet wie folgt:

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

Wenn der Inhalt eine lange englische Zeichenfolge ist, öffnet IE6 den Container, während andere Browser nur überlaufen, den Container jedoch nicht öffnen

Der Code lautet wie folgt:

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

Lange englische Zeichenfolgen können in Firefox nicht umbrochen werden

Der Code lautet wie folgt:

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

Unter IE6 werden lange englische Zeichenfolgen und lange chinesische Sätze den Container direkt öffnen. nur lange englische Zeichenfolgen werden überlaufen.

Der Code lautet wie folgt:

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

Dies ist derselbe wie im ersten Fall

Der Code lautet wie folgt:

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

Alle Browser brechen Zeilen um

Der Code lautet wie folgt:

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

Das Gleiche wie im ersten Fall

Der Code lautet wie folgt:

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

Alle werden unter IE6 geöffnet und alle überlaufen unter IE7, IE8 und Firefox

Der Code lautet wie folgt:

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

Dasselbe wie 7

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

css Erläuterung des Hintergrunds: transparent in

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen Wortumbruch, Zeilenumbruch und Leerzeichen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!