Menu
I am currently wondering what is the difference between the two. When I used both they seem to break the word if it is not fitting the container. But why did W3C made two ways to do it?
356
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.
The two properties ( word-break and word-wrap ) differ rules and overflow of words: as mentioned earlier, word-wrap is used to break words that overflow their container, while the word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn't overflow their ...
The overflow-wrap property breaks the word if it cannot be placed on the line without overflowing regardless of the language used. The word-break property is used for non-English languages and specifies wraps between letters of languages like Chinese, Japanese, and Korean.
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
word-wrap: break-word recently changed to overflow-wrap: break-word
word-break: break-all
So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).
And if it doesn’t matter, go for either.
114
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
