Intelligenter Zeilenumbruch in CSS?

Question

Wenn ich word-break: break-all auf ein Element setze, lande ich oft bei so etwas:

Hallo Leute, ich tippe eine Nach
richt, die zu lang ist, um zu passen!

Offensichtlich wäre es viel besser so:

Hallo Leute, ich tippe eine
Nachricht, die zu lang ist, um zu passen!

Aber gleichzeitig, wenn jemand schreibt:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!

Dann würde ich wollen, dass es so aussieht:

BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH!!!!!!

Ich finde einfach keinen Weg, das tatsächlich zu tun.

Beachten Sie, dass die Breite des Elements nicht festgelegt ist und sich ändern kann.

Answer 1

Versuchen Sie word-break: break-word; es sollte sich so verhalten, wie Sie es erwarten.

Answer 2

Für viele unserer Projekte fügen wir normalerweise dies hinzu, wenn nötig:

.text-that-needs-wrapping {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

Es behandelt die meisten seltsamen Situationen mit verschiedenen Browsern.

Answer 3

Die aktualisierte Antwort sollte sein:

overflow-wrap:break-word;

Es wird ein Wort umgebrochen, das alleine nicht auf eine eigene Zeile passen würde, lässt aber alle anderen Wörter so wie sie sind (siehe overflow-wrap hier).

Sie könnten auch verwenden:

overflow-wrap:anywhere; aber das ermöglicht Zeilenumbrüche nach jedem Wort, um die Breite eines Elements zu reduzieren. Sehen Sie den unten beschriebenen Unterschied von MDN:

[break-word ist] Das Gleiche wie der Wert anywhere, wobei normalerweise nicht trennbare Wörter an beliebigen Stellen getrennt werden dürfen, wenn es keine ansonsten akzeptablen Trennstellen in der Zeile gibt, aber weiche Umbruchmöglichkeiten, die durch den Wortumbruch eingeführt werden, werden NICHT berücksichtigt, wenn die intrinsischen Mindestgrößen berechnet werden.

Außerdem wird anywhere nicht von Internet Explorer, Safari und einigen mobilen Browsern unterstützt, während break-word auf allen gängigen Browsern unterstützt wird (siehe [hier][2]).

word-break: break-word; sollte nicht mehr verwendet werden, da es zugunsten des overflow-wrap:break-word; veraltet ist. Jetzt soll die Eigenschaft word-break verwendet werden, wenn man Wörter unabhängig davon umbrechen möchte, ob sie auf eine eigene Zeile passen könnten (also das erste Beispiel des Fragestellenden mit word-break: break-all.

Im Gegensatz zu word-break wird overflow-wrap nur einen Umbruch erstellen, wenn ein ganzes Wort nicht auf eine eigene Zeile passen kann, ohne überzulaufen.

(Von overflow-wrap auch oben verlinkt)

Answer 4

Für intelligente Wortumbrüche oder für korrekte Wortumbrüche von Anfang an benötigen Sie sprachabhängige Regeln. Für Englisch und viele andere Sprachen bedeutet der korrekte Umbruch Silbentrennung, wobei am Ende einer Zeile ein Bindestrich hinzugefügt wird, wenn ein Umbruch erfolgt.

In CSS können Sie hyphens: auto verwenden, obwohl Sie es meistens noch mit Hilfe von Herstellerpräfixen duplizieren müssen. Da dies nicht bei IE 9 funktioniert, sollten Sie möglicherweise stattdessen eine JavaScript-basierte Silbentrennung wie Hyphenate.js in Betracht ziehen. In beiden Fällen ist es wichtig, Sprachmarkup (lang-Attribut) zu verwenden.

Das Aufbrechen langer, nicht trennbarer Zeichenfolgen ist ein anderes Problem. Sie sollten am besten in der Vorverarbeitung behandelt werden, aber in einer einfachen Einstellung könnte word-break: break-word (was in Englisch z.B. eine inkorrekte Worttrennung bedeutet) als Notlösung betrachtet werden.

Answer 5

overflow-wrap: anywhere; ist, was du brauchst.