Menu
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.
406
The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen. If we then set the width of the text to one em , the word will break by each letter: HTML.
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.
You can use the word-wrap , overflow-wrap , or word-break CSS properties to wrap or break words that would otherwise overflow their container.
You can wrap a long string, which does not have any whitespace character by using the CSS word-wrap property, or overflow-wrap, if you use CSS3.
Try word-break: break-word; it should behave as you expect.
81
For a lot of our projects we usually add this where necessary:
.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; } It handles most odd situations with different browsers.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
