CSS-Overflow-Wrap – Verwendung neuer Eigenschaftswerte überall

1. Verstehen Sie zunächst das Overflow-Wrap-Attribut

Die CSS-Eigenschaft „ overflow-wrap ist eigentlich die vorherige Eigenschaft word-wrap . MDN springt jetzt direkt word-wrap zur Dokumentationsseite der Eigenschaft overflow-wrap .

Da die overflow-wrap -Eigenschaft von IE-Browsern nicht unterstützt wird und andere moderne Browser immer noch die alte Syntax word-wrap Eigenschaft unterstützen, gibt es keinen Grund overflow-wrap -Eigenschaft zu verwenden.

Bis eines Tages overflow-wrap -Eigenschaft plötzlich einen neuen Eigenschaftswert unterstützte, anywhere , und es einen Grund für die Verwendung overflow-wrap Eigenschaft gab.

Die formale Syntax overflow-wrap Eigenschaft lautet wie folgt:

Überlauf-Umbruch: normal | Wortumbruch | überall

2. Was nützt irgendwo

Bevor wir anywhere die Funktion des technischen Attributwerts erklären, möchte ich Ihnen zunächst ein grundlegendes Verständnis der Konzepte „harter Zeilenumbruch“ und „weicher Zeilenumbruch“ vermitteln.

Harte Zeilenumbrüche fügen an den Umbruchpunkten des Textes tatsächliche Zeilenumbrüche ein, während weiche Zeilenumbrüche tatsächlich in derselben Zeile verbleiben, aber auf mehrere Zeilen aufgeteilt erscheinen. Beispielsweise führt word-break:break-all dazu, dass lange englische Wörter weichen Zeilenumbrüchen zugeordnet werden.

Die Unterschiede und Ähnlichkeiten zwischen Anywhere und Break-Word

Im Normalzustand verhält sich anywhere genauso wie break-word , d. h., eine ansonsten nicht umbrechbare Zeichenfolge (wie etwa ein langes Wort oder eine URL) kann an jeder beliebigen Stelle umbrochen werden, sofern in der Zeile keine anderen zulässigen Haltepunkte vorhanden sind und am Haltepunkt kein Bindestrich eingefügt wird.

Einfach ausgedrückt: Wenn aufeinanderfolgende englische Zeichen ohne Umbruch getrennt werden können, dann tun Sie das. Wenn das nicht möglich ist, dann trennen Sie sie. Daher kann im Vergleich zu „break-all“ etwas Leerraum übrig bleiben. Wie in der folgenden Abbildung dargestellt:

Ausführlichere Informationen finden Sie in diesem Artikel: „Der Unterschied zwischen word-break:break-all und word-wrap:break-word“.

Lassen Sie uns über die unterschiedlichen Unterstützungen sprechen. Der Unterschied zwischen anywhere und break-word besteht darin, dass overflow-wrap:anywhere weiche Zeilenumbrüche bei der Berechnung der Mindestinhaltsgröße berücksichtigt, während overflow-wrap:break-word nicht tut.

Beispielsweise das folgende Beispiel:

<p class="anywhere">Ich bin Zhangxinxu.</p>
<p class="break-word">Ich bin Zhangxinxu.</p>
P {
    Anzeige: Inline-Block;
    Breite: Mindestinhalt;
    Polsterung: 10px;
    Rand: durchgehendes Dunkelhimmelblau;
    vertikale Ausrichtung: oben;
}
.überall {
    Überlauf-Wrap: überall;  
}
.Worttrennung {
    Überlauf-Wrap: Wortumbruch;
}

Das Ergebnis im Chrome-Browser sieht wie folgt aus:

Es ist ersichtlich, dass die Mindestbreite des mit overflow-wrap:anywhere deklarierten Elements die Breite nach dem Umbrechen jedes englischen Wortes ist, während das mit overflow-wrap:break-word deklarierte Element weiterhin gemäß der Standardregel für die Mindestbreite berechnet wird.

Wie Sie sehen, ist overflow-wrap:anywhere wie ein Hybrid aus den Deklarationen overflow-wrap:break-word und word-break:break-all und wird hauptsächlich in flexiblen Layouts verwendet, d. h. wenn die Elementgröße ausreichend ist, werden die Wörter so oft wie möglich ohne Unterbrechung angezeigt, und wenn die Größe nicht ausreicht, können sie umbrochen werden.

3. Kompatibilität und Fazit

overflow-wrap:anywhere gibt an, dass die Kompatibilität derzeit nicht optimistisch ist. Derzeit (März 2020) unterstützt der Safari-Browser dies nicht, und der Chrome-Browser hat dies gerade erst unterstützt. Spezifische Informationen finden Sie in der Tabelle:

Daher ist es derzeit nicht für die Verwendung in tatsächlichen Projekten geeignet, Sie müssen es also nur verstehen.

Darüber hinaus wird dieses Attribut im normalen Textsatz nicht verwendet. Selbst wenn Sie den Wert dieses Attributs kennen, werden Sie nicht daran denken, es zu verwenden.

Es ist davon auszugehen, dass diese CSS-Funktion in Zukunft in Vergessenheit gerät.

Das ist alles, was ich zu sagen habe. Ich werde Ihnen kurz eine neue Funktion vorstellen.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung des neuen CSS-Overflow-Wrap-Eigenschaftswerts überall. Weitere verwandte Inhalte zum neuen CSS-Overflow-Wrap-Eigenschaftswert überall finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder weiter unten in den verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!