Tutorial zur Verwendung des Wortumbruch-Attributs in CSS3

Wir wissen, dass es in CSS3 ein sehr wichtiges -Attribut Wortumbruch gibt, deshalb werde ich Ihnen heute das Wortumbruch-Attribut vorstellen. Definition, Syntax, Parameter und ein kurzes Beispiel mit Wortumbruch, um allen das Verständnis zu erleichtern.

1. Definieren Sie das Attribut

word-break, um die Verarbeitungsmethode des automatischen Zeilenumbruchs anzugeben. Tipp: Mithilfe des Wortumbruch-Attributs können Sie dem Browser ermöglichen, an jeder beliebigen Stelle eine Zeile umzubrechen.

2. Syntax und Parameter

word-break: normal (Standard)|break-all|keep-all normal: Gemäß den Textregeln asiatischer Sprachen und nicht-asiatischer Sprachen , erlaubt innerhalb von Wörtern Zeilenumbruch: Chinesisch wird an der Grenze bis zum chinesischen Zeichen umgebrochen, und Englisch wird das gesamte Wort umbrechen. Wenn ein Wort zu lang ist, wird der Container unterbrochen wird nicht angezeigt. break-all: Sie können englische Wörter zwangsweise abschneiden und neue Zeilen erzwingen. 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: Dasselbe wie normal für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Wortumbrüche nicht zulässig. Das heißt, wenn es sich um ein chinesisches Wort handelt, wird eine chinesische Schriftzeichenphrase innerhalb der vorhergehenden und folgenden Satzzeichen vollständig umbrochen, und das englische Wort wird ebenfalls vollständig umbrochen. Hinweis: Firefox und Opera können es nicht erkennen.

3. Beschreibung

word-break: break-all ist ein Break-Wort. Wenn ein Wort eine Grenze erreicht, wird der nächste Buchstabe automatisch in die nächste Zeile verschoben. Es löst hauptsächlich das Problem langer englischer Zeichenfolgen (es gleicht lediglich den oben genannten Fehler aus, dass word-wrap:break-word bei langen Textzeichenfolgen nicht funktioniert).

4. Beispiel

Wenn wir mit dem oben Gesagten fortfahren, gehört das Wort „congratulation“ zu einer langen Reihe englischer Wörter. „Word-break:break-all“ kürzt das Wort und das Ende der Zeile wird so etwas wie conra(congratulation Der Front-End-Teil), die nächste Zeile ist der Back-End-Teil von tulation (conguatulation). Word-break:keep-all bezieht sich auf zusammenhängende Wörter in Chinesisch, Japanisch und Koreanisch. Das heißt, wenn Sie dieses Mal nur ohne Zeilenumbruch verwenden, werden die Chinesen nicht umbrechen. (Englische Sätze sind normal.)

5. Zusammenfassung

funktioniert nur auf Standardelementen auf Blockebene wie div. Tabellenelemente wie th und td werden erkannt, haben aber keine Auswirkung (getestet unter Chrome Word-Break:Break-All ist effektiv, aber aus Sicht der vollständigen Kompatibilität und des praktischen Speichers hat die vorherige Schlussfolgerung Vorrang. Firefox und Opera können Wortumbrüche nicht erkennen, geschweige denn die Auswirkung der Verwendung von Wortumbrüchen in th und td unter Firefox.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Schritte zur Implementierung mit CSS3, um einen allmählich leuchtenden quadratischen Rahmen zu erstellen

Wie wäre es mit den Animationseigenschaften? CSS3-Tutorial zur Verwendung von

zum Erstellen von Wassertropfeneffekten mit H5

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung des Wortumbruch-Attributs in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!