Unterschied zwischen Überlaufumbruch und Wortumbruch?

81

Was ist der genaue Unterschied zwischen overflow-wrap/ word-wrapund word-break? Und kann mir jemand sagen, was das bessere ist, um sehr lange Links zu brechen? Die meisten Leute sagen, Sie sollten Wortumbruch in Kombination mit verwenden, overflow-wrapaber es sieht nicht sehr logisch aus. Ich denke, die Verwendung overflow-wrapin Kombination mit word-wrapfür eine bessere browserübergreifende Unterstützung ist die beste Methode. Was denken Sie?

html css word-wrap word-break Anselm
quelle
6
An alle zukünftigen Leser, die zunächst verwirrt sein könnten, warum dies als doppelte Frage geschlossen wurde. Der CSS Text des Moduls 3 besagt , dass overflow-wrapund zu word-wrap100% identisch in der Funktionalität sein sollte. Persönlich habe ich den Eindruck, dass dies word-wrapnur für die Unterstützung älterer Browser verwendet werden sollte und dass es in einer zukünftigen Version von CSS möglicherweise veraltet oder gelöscht wird.
Tyler Crompton
22
Für diejenigen, die dafür gestimmt haben, dies zu schließen: Dies ist kein Duplikat wie angegeben, die Frage ist nicht dieselbe. Bei dem angeblichen Duplikat handelt es sich um zwei spezifische Werte der beiden Eigenschaften, und bei dieser Frage handelt es sich um die beiden Eigenschaften. Ich mag es wirklich nicht, dass einige Leute glauben, das Recht zu haben, anderen die Beantwortung einer Frage zu verbieten. Wenn Ihnen eine Frage nicht gefällt, lesen Sie sie einfach nicht!
Hibou57
3
@ Tyler Crompton Sie verwechseln word-wrapmitword-break
Katamphetamin
1
Ich stimme Hibou57 zu. Dies ist kein Duplikat. Es ist bedauerlich, dass es geschlossen ist, da es schwierig ist, online eine Antwort auf diese Frage zu finden.
Paul-Hebert
@ TylerCrompton Bei dieser Frage geht es nicht um word-wrap. Hier geht es darum word-break. Das Schließen als doppelte Frage macht keinen Sinn.
Einsamer Lernender

Antworten:

64

Zitat aus der Quelle

  • Zeilenumbruch: Mit der CSS-Eigenschaft "Zeilenumbruch" wird angegeben, ob der Browser Zeilen innerhalb von Wörtern unterbrechen darf, um einen Überlauf zu verhindern, wenn eine ansonsten unzerbrechliche Zeichenfolge zu lang ist, um in das enthaltene Feld zu passen.

  • overflow-wrap : Die word-wrapEigenschaft wurde overflow-wrapim aktuellen Entwurf der CSS3-Textspezifikation umbenannt

  • Wortumbruch: Mit der Wortumbruch-CSS-Eigenschaft wird angegeben, wie (oder ob) Zeilen innerhalb von Wörtern unterbrochen werden sollen

Sie benötigen also einen Wortumbruch in Kombination mit einem Zeilenumbruch, was die richtige Kombination ist.

karthikr
quelle
Ja, das word-wrapist ausreichend, aber wenn die Containerbreite begrenzt ist, kann das Layout durcheinander geraten.
Karthikr
OK, ich verstehe. Ich verwende Zeilenumbruch nur für Links, damit das Layout nicht kaputt geht.
Anselm
7
Eine Antwort gefunden: "Die W3-Spezifikation, die darüber spricht, scheint darauf hinzudeuten, dass Wortumbruch: Umbruch ein bestimmtes Verhalten mit CJK-Text erfordert, während Wortumbruch: Umbruchwort das allgemeinere Nicht-CJK- ist. bewusst, Verhalten. " ( stackoverflow.com/questions/1795109/… ) CJK ist ein Sammelbegriff für Chinesisch, Japanisch und Koreanisch.
Anselm
Oh. aber ich dachte, deine Frage sei ganz anders. Wie auch immer, ich bin froh, dass du deine Antworten gefunden hast, und ich vertraue darauf, dass ich ein bisschen
geholfen habe
4
Zeilenumbruch ist eine veraltete Microsoft-Erweiterung (auch wenn sie von den meisten Browsern als nicht vorfixierte Eigenschaft implementiert wurde) und wurde jetzt durch Überlaufumbruch ersetzt. MDN hat die beiden verschiedenen Seiten zu einer einzigen zusammengeführt: developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
CharlesM
6

Es hilft zu verstehen, dass an dieser Stelle word-break: break-wordwirklich ein Alias ​​für ist overflow-wrap: anywhere.

word-break: break-wordist offiziell veraltet; Siehe den CSS-Textmodul Level 3-Arbeitsentwurf :

Aus Gründen der Kompatibilität mit älteren Inhalten unterstützt die word-breakEigenschaft auch ein veraltetes break-wordSchlüsselwort. Wenn angegeben, hat dies den gleichen Effekt wie word-break: normalund overflow-wrap: anywhere, unabhängig vom tatsächlichen Wert der Overflow-Wrap-Eigenschaft.

Hier ist zu beachten, dass word-break: break-wordes sich um einen Alias ​​für overflow-wrap: anywhereund NICHT um einen Alias ​​für handelt overflow-wrap: break-word.

( word-break: normalist nur der Standardwert für word-break, sodass Sie ihn ignorieren können, es sei denn, Sie legen einen anderen Wert für fest word-break.)

Wie kann overflow-wrap: anywhereund overflow-wrap: break-wordunterscheiden?

Der einzige Unterschied in der Dokumentation zwischen den beiden besteht darin, dass overflow-wrap: anywhereDOES "Soft-Wrap-Möglichkeiten berücksichtigt, die durch das Wort break eingeführt werden", wenn es "intrinsische Größen mit minimalem Inhalt berechnet", während overflow-wrap: break-worddies NICHT der Fall ist.

Ich denke, Breiten könnten in einigen Fällen genauer sein, wenn sie berücksichtigt werden?

Ben Wheeler
quelle
5

Hier sind die genauen Unterschiede: (basierend auf Tests in Chrome v81 und Bestätigung meiner Beobachtungen durch Bezugnahme auf die Spezifikation)

Leerraum

normal(Standard): Reduziert Leerzeichen und Zeilenumbrüche. fügt bei Bedarf Zeilenumbrüche hinzu
nowrap: reduziert Leerzeichen und Zeilenumbrüche; fügt keine Zeilenumbrüche hinzu
pre-line: reduziert Leerzeichen-Ketten; fügt bei Bedarf Zeilenumbrüche hinzu
pre-wrap: kein Reduzieren; fügt bei Bedarf Zeilenumbrüche hinzu
break-spaces: wie vor dem Zeilenumbruch , außer bei Leerzeichen, die das Hinzufügen von Zeilenumbrüchen auslösen können
pre: kein Reduzieren; fügt keine Zeilenumbrüche hinzu

Hinweis: Wenn in den ausgewählten white-spaceWertelisten "keine Zeilenumbrüche hinzugefügt werden", kann das Zeilenumbruchverhalten der folgenden Eigenschaften nicht angewendet (dh ignoriert) werden.

Wortumbruch

normal(Standard): Unterbricht die Zeile am Ende der letzten Wortanpassung innerhalb des Containers [falls vorhanden], sonst Zeile ungebrochen
break-word: Unterbricht die Zeile am Ende der letzten Wortanpassung innerhalb des Containers [falls vorhanden], sonst am Ende des Containers
break-all: Unterbricht die Zeile bei Ende des Containers [kann ein Wort teilen, auch bei Leerzeichen in der Nähe]

Überlaufumbruch (Legacy-Name: Zeilenumbruch)

normal(Standard): Unterbricht die Zeile am Ende der letzten Wortanpassung innerhalb des Containers [falls vorhanden], sonst Zeile ungebrochen
break-word: Unterbricht die Zeile am Ende der letzten Wortanpassung innerhalb des Containers [falls vorhanden], sonst am Ende des Containers [falls nicht vorhanden] -flex container], sonst Zeile ungebrochen
anywhere: Unterbricht die Zeile am Ende der letzten Wortanpassung innerhalb des Containers [falls vorhanden], sonst am Ende des Containers [so wie word-break: break-word]

Beachten Sie, dass für overflow-wrap: break-word(wie bei jeder Kombination, bei der die Linien für den Container zu lang bleiben) die ununterbrochene Linie dazu führen kann, dass sich ein Flex-Container über das angegebene Flex-Verhältnis hinaus ausdehnt (wodurch andere Flex-Container schrumpfen müssen, um den zu langen Inhalt zu berücksichtigen).

Venryx
quelle
basierend auf der Tatsache, dass Sie "basierend auf Dokumenten" gesagt haben Ich gehe davon aus, dass dieser Inhalt größtenteils von irgendwoher kopiert wird? SO missbilligt normalerweise Inhalte, die nur eine reine Kopie von Inhalten an anderer Stelle sind. In beiden Fällen müssen Sie jedoch beim Kopieren von Inhalten Quellen angeben, um Plagiate zu vermeiden. Außerdem ist das Testen in Chrome als Quelle kaum zuverlässig, um festzustellen, ob etwas mit den Angaben in der Spezifikation übereinstimmt.
TylerH
1
@ TylerH Es ist keine reine Kopie von Inhalten an anderer Stelle. Die meisten Verhaltensbeschreibungen stammen aus meinen direkten Tests in Chrome, wobei auf Dokumentseiten verwiesen wurde, um zu bestätigen, dass das beobachtete Verhalten mit der Spezifikation übereinstimmt, und um sicherzugehen, dass mir kein zusätzliches Verhalten entgangen ist. Weit entfernt von Plagiaten. (Ich werde die Notiz oben aktualisieren, um dies zu verdeutlichen.)
Venryx