Menu
What´s the exact difference between overflow-wrap/word-wrap and word-break? And can anybody tell me what´s the better one for breaking very long links? Most people say you should use word-break in combination with overflow-wrap but it doesn't look very logical. I think using overflow-wrap in combination with word-wrap for better cross-browser support is the best method. What do you think?
345
However, there are differences in the way the two properties handle it. Using overflow-wrap will wrap the entire overflowing word to its line if it can fit in a single line without overflowing its container. The browser will break the word only if it cannot place it on a new line without overflowing.
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. word-wrap: break-word; It is used to broken the words at arbitrary points to prevent overflow.
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.
Quoting from source
word-wrap: The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
overflow-wrap: word-wrap property has been renamed overflow-wrap in the current draft of the CSS3 Text specification
word-break: The word-break CSS property is used to specify how (or if) to break lines within words
So, you need word-break in combination with word-wrap, which is the right combination.
150
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
