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

1aae6d537db471b0921840a1044b68a1safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj94b3e26ee717c64999d7867364b1b4a3
1988bbf16ede8f4b3314902a5d209c2eThis is all English. This is all English. This is all English.94b3e26ee717c64999d7867364b1b4a3
1988bbf16ede8f4b3314902a5d209c2e全是中文的情况。全是中文的情况。全是中文的情况。94b3e26ee717c64999d7867364b1b4a3
1988bbf16ede8f4b3314902a5d209c2e中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.94b3e26ee717c64999d7867364b1b4a3复制代码

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!