Difference between overflow-wrap and word-break?

html css word-wrap word-break
Anselm picture Anselm · Jun 23, 2013 · Viewed 48.5k times · Source

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?

Answer

karthikr picture karthikr · Jun 23, 2013

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.

Related questions

CSS, Text overflows out of table cell

I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions: Table code: https://dl.dropboxusercontent.com/u/108321090/…

Read More
After word break, align next line to the left rather than center

I am styling my paragraphs and I have line break after a certain amount of characters. I want to be able to make the line after the break to be aligned left rather than center.

Read More
How to word wrap text in HTML?

How can text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa which exceeds the width of a div (say 200px) be wrapped? I am open to any kind of solution such as CSS, jQuery, etc.

Read More