If I just put word-break: break-all on an element, I often end up with this:
Hello people, I am typing a mes
sage that's too long to fit!
Obviously this would be much better as:
Hello people, I am typing a
message that's too long to fit!
But at the same time if someone writes:
BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!
Then I'd want it to be:
BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH!!!!!!
I can't seem to find a way to actually do this.
Note that the width of the element is not fixed and may change.
Try word-break: break-word; it should behave as you expect.