CSS erzwungener Zeilenumbruch und darüber hinaus versteckte Implementierung

1. Erzwungener Zeilenumbruch

word-break: break-all funktioniert nur auf Englisch, wobei Buchstaben als Grundlage für Zeilenumbrüche verwendet werden.

Wortumbruch: Break-Word funktioniert nur auf Englisch und verwendet Wörter als Grundlage für Zeilenumbrüche.

white-space: pre-wrap; funktioniert nur für Chinesisch und erzwingt Zeilenumbrüche.

word-break:break-all und word-wrap:break-word ermöglichen beide das automatische Umbrechen des Inhalts von Containern wie divs. Der Unterschied zwischen ihnen ist:

1. break :break-all

Angenommen, die Div-Breite beträgt 450 Pixel, wird der Inhalt automatisch bei 450 Pixel umbrochen. Wenn am Ende der Zeile ein langes englisches Wort steht, wird das Wort abgeschnitten und ein Teil davon beibehalten am Ende der Zeile. Der andere Teil geht in die nächste Zeile.

2. Zeilenumbruch:break-word

Das Beispiel ist das gleiche wie oben, aber der Unterschied besteht darin, dass das gesamte Wort als Ganzes behandelt wird nicht breit genug ist, um das gesamte Wort anzuzeigen, wird das gesamte Wort automatisch in die nächste Zeile eingefügt, ohne das Wort abzuschneiden.

Zeilenumbrüche verbieten und das Ausblenden überschreiten

white-space:nowrap;

overflow:hidden; dient dazu, den zusätzlichen Inhalt auszublenden, da sonst der zusätzliche Inhalt den Container platzen lässt.

text-overflow:ellipsis; Lassen Sie zusätzlichen Inhalt mit Auslassungspunkten ausdrücken ... Dieses Attribut wird jedoch hauptsächlich in Browsern wie dem IE verwendet. Der Opera-Browser verwendet -o-text-overflow:ellipsis, während der Firefox-Browser diese Funktion nicht hat und der zusätzliche Inhalt nur ausgeblendet werden kann.