Wie erzwinge ich mit „word-break:break-all“ eine neue Zeile?

Unter normalen Umständen haben Elemente den Standardwert white-space:normal (automatischer Zeilenumbruch, PS: Kein Zeilenumbruch ist white-space:nowrap). Wenn die Definition überschritten wird, wird automatisch nach der Breite des Containers umgebrochen. Wenn es sich bei den eingegebenen Daten jedoch um eine Reihe von Zeichen, Buchstaben oder Zahlen ohne Leerzeichen handelt (normale Daten sollten nicht vorhanden sein, aber einige Tester machen dies auf diese Weise), wenn die Breite überschritten wird Wird die maximale Kapazität des Behälters überschritten, wird der Behälter ohne Verpackung größer.

Lösung (mit IE, Chrome, FF als Testbrowser):

{　　word-break:break-all;
　　 word-wrap:break-word;
}

Das Folgende ist der Unterschied zwischen den beiden Methoden:

1, Wortumbruch :break-all Wenn ein Div beispielsweise 200 Pixel breit ist, wird sein Inhalt automatisch auf 200 Pixel umbrochen. Wenn am Ende der Zeile ein langes englisches Wort steht (Glückwunsch usw.), wird das Wort abgeschnitten und verwandeln Sie es in diese Zeile. Das Ende ist conra (der vordere Teil von congratulation), und die nächste Zeile ist der hintere Teil von tulation (conguatulation).

2, word-wrap:break-word Das Beispiel ist das gleiche wie oben, aber der Unterschied besteht darin, dass das gesamte Glückwunschwort als Ganzes behandelt wird Wenn das Ende der Zeile nicht breit genug ist, um das ganze Wort anzuzeigen, wird das ganze Wort automatisch in die nächste Zeile eingefügt, ohne das Wort abzuschneiden.

3, word-break:break-all Unterstützte Version: IE5 oder höher Dieses Verhalten ist das gleiche wie in asiatischen Sprachen normal. Pausen innerhalb eines beliebigen Wortes einer Textzeile in einer nicht-asiatischen Sprache sind ebenfalls zulässig. Dieser Wert eignet sich für asiatischen Text, der nicht-asiatischen Text enthält.

word-wrap:break-word Unterstützte Version: IE5.5 oder höher Der Inhalt wird innerhalb der Grenze umgebrochen. Bei Bedarf erfolgt auch ein Wortumbruch. Der Tisch wird automatisch umwickelt, um eine Dehnung zu vermeiden.

Syntax: Wortumbruch: normal |. break-all |. Parameter: normal: Gemäß den Textregeln asiatischer und nichtasiatischer Sprachen sind Zeilenumbrüche innerhalb von Wörtern zulässig
break-all: Das Verhalten ist das gleiche wie bei asiatischen Sprachen üblich. Pausen innerhalb eines beliebigen Wortes einer Textzeile in einer nicht-asiatischen Sprache sind ebenfalls zulässig. Dieser Wert eignet sich für asiatischen Text, der nicht-asiatischen Text enthält.
Alles behalten: Dasselbe wie normal für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Wortumbrüche nicht zulässig. Geeignet für nicht-asiatischen Text, der eine kleine Menge asiatischen Text enthält.

Syntax: Zeilenumbruch: normal | break-word

Parameter: normal: Inhalt an die angegebene Containergrenze stoßen lassen
　break-word: Der Inhalt wird innerhalb der Grenzen umbrochen. Bei Bedarf erfolgt auch ein Wortumbruch. Beschreibung: Legt fest oder ruft ab, ob die Zeile umgebrochen werden soll, wenn die aktuelle Zeile die Grenze des angegebenen Containers überschreitet.

Vorschlag: Die 3C-Erkennung von Wortumbrüchen führt zu Problemen in Baidu-Snapshots – dieses Attribut Der OPERA FIREFOX-Browser unterstützt das Wortumbruch-Attribut nicht. Sie können „white-space:normal“ verwenden. um es zu ersetzen, damit die Zeilenumbrüche unter FireFox und IE korrekt sind. Beachten Sie außerdem, dass die Leerzeichen zwischen Wörtern nicht zum Ersetzen verwendet werden können, da sonst die Zeilenumbrüche nicht korrekt sind.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich mit „word-break:break-all“ eine neue Zeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!