Frage zu overflow-wrap

[Eric]

Moin,

kann mir jemand den Unterschied erklären zwischen

overflow-wrap: break-word

und

overflow-wrap: anywhere?

Ich sehe keinen.

[Matthias Scharwies]

Servus!

Moin,

kann mir jemand den Unterschied erklären zwischen

overflow-wrap: break-word

und

overflow-wrap: anywhere?

Umbruch irgendwo im Wort - auch innerhalb von Silben.

break-word: Gut für Fließtext (z.B. Artikeltexte), der normalerweise ordentlich umbrechen soll.

anywhere: Gut für extreme Fälle wie lange URLs, Programmcodes, künstliche Daten — überall wo Worte extrem lang werden können und unbedingt Platz gespart werden muss.

im Wiki: CSS/Eigenschaften/overflow-wrap

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

du hast, glaube ich, overflow-wrap:break-word mit der word-break Eigenschaft wervexelt. Was ziemlich gegen die Klugheit dieser Namensgebung spricht.

Die overflow-wrap Werte anywhere und break-word zerreißen beide lange Wörter ohne Rücksicht auf Verluste. Den Unterschied habe ich recherchiert und in meiner Antwort erläutert. Wie immer: ich habe keine Ahnung von irgendwas, weiß aber, wo ich suchen muss und kann dann klug daherschwätzen 😀

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

du hast, glaube ich, overflow-wrap:break-word mit der word-break Eigenschaft wervexelt. Was ziemlich gegen die Klugheit dieser Namensgebung spricht.

eigentlich nein. Und mein Link zeigt auch auf die passende Referenzseite.

Die overflow-wrap Werte anywhere und break-word zerreißen beide lange Wörter ohne Rücksicht auf Verluste. Den Unterschied habe ich recherchiert und in meiner Antwort erläutert. Wie immer: ich habe keine Ahnung von irgendwas, weiß aber, wo ich suchen muss und kann dann klug daherschwätzen 😀

Na ja.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias Scharwies,

eigentlich nein.

Hm. Dann muss ich deiner Antwort ein Minus geben, denn du bist am Thema vorbei.

break-word und anywhere sind beide geeignet, zu lange URLs zu zerbrechen. Der Unterschied liegt ausschließlich in der Berechnung der intrinsischen Minimalbreite.

→ Spec

Die Folgerecherche war dann noch, was der Unterschied zwischen overflow-wrap mit einem Wert ungleich "normal" und word-break: break-all ist. Ergebnis: word-break:break-all fängt an, ein Wort auf die Zeile zu schreiben und wenn die Zeile zu ende ist, bricht er es auseinander. overflow-wrap zusammen mit word-break ungleich break-all versucht erstmal, es auf die Folgezeile zu verschieben.

Es gibt auch den legacy-Wert word-break: break-word, das schaltet unter der Haube auf word-break:normal mit overflow-wrap:anywhere. Ist aber missbilligt.

Rolf

[Rolf B]

Hallo Eric,

anywhere ist aggressiver, wenn es um die Bestimmung des minimalen Platzbedarfs (width: min-content) geht. Die Minimalbreite von "Donaudampfschifffahrtskapitän" bei anywhere ist die Breite des breitesten enthaltenen Zeichens, bei break-word ist es das gesamte Wort. In einer Box, wo die Breite nicht durch min-content, sondern anders vorgegeben ist, verhalten sich anywhere und break-word gleich, würde ich behaupten.

Im Selfwiki haben wir kein Beispiel, das den Unterschied illustriert, aber bei MDN gibt es etwas.

Das Beispiel bei MDN verwendet width:min-content; und max-width:11em. D.h. mit min-content wird gesagt, dass die Box nicht breiter werden soll als es für den Inhalt nötig ist, und mit max-width wird eine Maximalbreite bestimmt.

Bei overflow-wrap:break-word ist die Minimalbreite des langen Worts größer als die maximale Boxbreite, deshalb ist die Boxbreite 11em und das lange Wort wird erst zerrissen, wenn es nicht mehr anders geht.

Bei overflow-wrap:anywhere ist die Minimalbreite des Langworts so breit wie der breiteste Buchstabe darin, die minimale Inhaltsbreite der Box wird deshalb durch die übrigen Wörter bestimmt und der Umbruch des Langwortes basiert letztendlich darauf.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Eric,

anywhere ist aggressiver, wenn es um die Bestimmung des minimalen Platzbedarfs (width: min-content) geht.

Auch bei width: fit-content verhalten sich overflow-wrap: break-word, overflow-wrap: anywhere und word-break: break-all unterschiedlich:

(Codepen)

overflow-wrap: anywhere ist da wohl das, was man will.

Jolan tru

[Rolf B]

Hallo Gunnar,

danke für's Probieren.

Ich weiß nicht, wo sich die intrinsische Minimalbreite überall auswirkt. Bei den *-content-Schlüsselwörtern sicherlich. Aber ich vermute, in Tabellen, Flexboxen und Grids auch.

Rolf