CSS-Steuerung erzwungene Zeilenumbruchlösung

1. Das Problem wurde gefunden
Unter normalen Umständen haben Elemente den Standard-Leerraum:normal (automatischer Zeilenumbruch, wenn der eingegebene Text die definierte Breite überschreitet, wird er angezeigt). Wenn die eingegebenen Daten jedoch aus einer Reihe von Zeichen, Buchstaben oder Zahlen ohne Leerzeichen bestehen (normale Daten sollten nicht vorhanden sein, aber einige Tester machen es auf diese Weise), wird der Container umbrochen, wenn er die Breite des Containers überschreitet ohne Zeilenumbrüche erweitert.

2. Lösung
Nehmen Sie div als Beispiel
div{
word-break:break-all;
word-wrap:break-word;
}

3. Erklärung des Unterschieds
① Verständnis der Kürzung
word-break:break-all
Wenn das Div 200 Pixel breit ist, wird sein Inhalt automatisch bei 200 Pixel umbrochen Am Ende der Zeile steht ein sehr langes englisches Wort „congratulation“. Das Wort wird gekürzt, sodass das Ende der Zeile „conra“ und die nächste Zeile „tulation“ lautet.

word-wrap:break-word
Das Beispiel ist das gleiche wie oben, der Unterschied besteht jedoch darin, dass das gesamte Wort als Ganzes gratuliert wird, wenn das Ende der Zeile nicht breit genug ist Wenn Sie das gesamte Wort anzeigen, wird automatisch das gesamte Wort angezeigt. Das Wort wird ohne Abschneiden in die nächste Zeile eingefügt.

② Unterstützte Versionen
word-break;break-all Unterstützte Versionen: IE5 und 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 Versionen: IE5.5 und höher Der Inhalt wird innerhalb der Grenze umgebrochen. Bei Bedarf werden auch Wortumbrüche vorgenommen. Der Tisch wird automatisch umwickelt, um eine Dehnung zu vermeiden.

③ Syntax
Wortumbruch: normal |. keep-all
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.
keep-all: Gleich 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

Zeilenumbruch: normal | Wortumbruch
normal: Ermöglicht dem Inhalt, die angegebene Containergrenze zu durchbrechen
umbruchwort: Inhalt wird innerhalb der Grenze 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.

4. Hinweise
① Wenn Sie feststellen, dass einer davon zur Steuerung von Zeilenumbrüchen ungültig ist, schreiben Sie zwei davon. Beispielsweise zeigt td{ word-break:break-all;word-wrap:break-word }
②word-break Probleme an, wenn es von 3C erkannt wird, was auch zu Problemen in Baidu-Snapshots führt. Dieses Attribut wird von nicht unterstützt Das Attribut „word-break“ kann durch „white-space:normal“ ersetzt werden, damit die Zeilenumbrüche unter FireFox und IE korrekt sind. Außerdem ist zu beachten, dass stattdessen keine Leerzeichen verwendet werden können Zeilenumbrüche sind nicht korrekt.

Das obige ist der detaillierte Inhalt vonCSS-Steuerung erzwungene Zeilenumbruchlösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!