Der Unterschied zwischen Wortumbruch und Zeilenumbruch beim automatischen Zeilenumbruch in CSS

Was sind das für zwei Dinge? Ich glaube, es gibt immer noch viele Leute, die es nicht verstehen können. Sie können sich nur einen Wortumbruch merken und schreiben. break:break-all; wird verwendet, um Satzumbrüche zu erzwingen, oder vielleicht liegt es daran, dass diese beiden Dinge zu verwirrend sind, um sie auszusprechen und ähnlich aussehen, was es schwierig macht, sie auswendig zu lernen.

Unter normalen Umständen haben Elemente den Standardwert

white-space:normal (automatischer Zeilenumbruch, white-space:nowrap, wenn kein Zeilenumbruch erfolgt, wenn der eingegebene Text die definierte Breite überschreitet). Es wird automatisch ein Zeilenumbruch durchgeführt, aber wenn die eingegebenen Daten aus einer Reihe von Zeichen, Buchstaben oder Zahlen ohne Leerzeichen bestehen (normale Daten sollten nicht vorhanden sein, aber einige Tester machen es so), wird der Container erweitert, wenn er die Breite von überschreitet der Container. Keine Zeilenumbrüche.

Es gibt also zwei Möglichkeiten, die Lösung zu schreiben (mit IE, Chrome und FF als Testbrowser):

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

Erklärung des Unterschieds zwischen den beiden Methoden:

1, word-break:break-all Wenn ein Div beispielsweise 400 Pixel breit ist, wird sein Inhalt automatisch bei 400 Pixel umbrochen. Wenn am Ende der Zeile ein langes englisches Wort steht (Glückwunsch usw.), wird es kürzt das Wort ab und verwandelt es in conra am Ende der Zeile (der vordere Teil der Glückwünsche), die nächste Zeile ist der hintere Teil der tulation (conguatulation).

2. Das Beispiel „Wortumbruch:Wort umbrechen“ ist das gleiche wie oben, der Unterschied besteht jedoch darin, dass das gesamte Wort als Ganzes angezeigt wird Das gesamte Wort wird automatisch in die nächste Zeile eingefügt, ohne das Wort abzuschneiden.

HTML-Code:

<div style="width:400px;background:#000;color:#fff;height:100px;margin:0 auto;word-break:break-all; ">
    congratulation congratulation congratulation congratulation congratulation congratulation</div>
    </br/>
    <div style="width:400px;height:100px;background:#000;color:#fff;margin:0 auto;word-wrap:break-word;">
    congratulation congratulation congratulation congratulation congratulation congratulation</div>

Das Ergebnis ist wie in der Abbildung dargestellt:

Wortumbruch automatisch umbrechen:break- all und word -wrap:break-word

word-break:break-all und word-wrap:break-word ermöglichen beide, dass der Inhalt seines Containers wie DIV automatisch umbrochen wird.
Der Unterschied zwischen ihnen ist:
1, Wortumbruch:Break-All. Wenn ein Div beispielsweise 200 Pixel breit ist, wird sein Inhalt automatisch auf 200 Pixel umgebrochen, wenn am Ende ein langes englisches Wort steht In der Zeile (Glückwunsch usw.) wird das Wort so abgeschnitten, dass das Ende der Zeile conra (der vordere Teil von congratulation) und die nächste Zeile der hintere Teil von tulation (conguatulation) ist.
2. Das Beispiel „Wortumbruch:Wortumbruch“ ist das gleiche wie oben, mit dem Unterschied, dass das gesamte Wort als Ganzes angezeigt wird, wenn das Ende der Zeile nicht breit genug ist, um das gesamte Wort anzuzeigen , wird das gesamte Wort automatisch in einer Zeile abgelegt, ohne dass die Wörter abgeschnitten werden.
3, word-break;break-all Unterstützte Version: IE5 oder höher Dieses Verhalten ist das gleiche wie in 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. WORD-WRAP:break-word Unterstützte Version: IE5.5 oder höher Der Inhalt wird innerhalb der Grenze umbrochen. Bei Bedarf erfolgt auch ein Wortumbruch. Der Tisch wird automatisch umwickelt, um eine Dehnung zu vermeiden. Wortumbruch: normal |. break-all |. keep-all Parameter: normal: Zeilenumbrüche innerhalb von Wörtern gemäß Textregeln für asiatische und nicht-asiatische Sprachen zulassen break-all: Dieses Verhalten ist das gleiche wie normal für asiatische Sprachen. 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. Alle 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: Erlaubt, dass der Inhalt gegen die angegebene Containergrenze geschoben wird. Break-Wort: Der Inhalt wird innerhalb der Grenze umgebrochen. 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. Die entsprechende Skriptfunktion von
ist
wordWrap. Bitte sehen Sie sich andere Bücher an, die ich geschrieben habe. Syntax: table-layout: auto |. Parameter: auto: Standardmäßiger automatischer Algorithmus. Das Layout basiert auf dem Inhalt jeder Zelle. Die Tabelle wird erst angezeigt, wenn jede Zelle gelesen und berechnet wurde. Sehr langsam behoben: Layout-Algorithmus korrigiert. Bei diesem Algorithmus basiert das horizontale Layout nur auf der Breite der Tabelle, der Breite des Tabellenrandes, dem Zellenabstand und der Breite der Spalten und hat nichts mit dem Inhalt der Tabelle zu tun. Beschreibung: Festlegen oder rufen Sie den Layout-Algorithmus der Tabelle ab. Das entsprechende Skriptattribut ist tableLayout. Vorschlag: Die Erkennung von Wortumbrüchen durch 3C führt auch zu Problemen in Baidu-Snapshots – dieses Attribut wird vom Browser OPERA FIREFOX nicht unterstützt. Sie können stattdessen „white-space:normal“ verwenden dass Zeilenumbrüche unter FireFox und IE korrekt ausgeführt werden können. Bitte beachten Sie, dass Leerzeichen zwischen Wörtern nicht zum Ersetzen verwendet werden können, da Zeilenumbrüche sonst nicht korrekt ausgeführt werden können.

So wird es auf einen Blick klar.

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