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

Dies ist wonach du suchst:

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}