What is the difference between word-break break-all versus word-wrap break-word in CSS

Question

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

User · Answer

word-break break-all    word to continue to border then break in newline   word-wrap break-word    At first   word wrap in newline then continue to border   Example     x000D   x000D  div   x000D     border  1px solid red  x000D     width  200px  x000D    x000D   x000D  span   x000D    background-color  yellow  x000D    x000D   x000D   break-all   x000D    word-break break-all  x000D     x000D   break-word   x000D    word-wrap break-word    x000D    x000D   lt b gt word-break break-all lt  b gt  x000D   x000D   lt div class  break-all  gt  x000D    This text is styled with x000D     lt span gt soooooooooooooooooooooooooome lt  span gt  of the text x000D    formatting properties  x000D   lt  div gt  x000D   x000D   lt b gt  word-wrap break-word lt  b gt  x000D   x000D   lt div class  break-word  gt  x000D    This text is styled with x000D     lt span gt soooooooooooooooooooooooooome lt  span gt  of the text x000D    formatting properties  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

word-wrap  break-word recently changed to overflow-wrap  break-word   will wrap long words onto the next line  adjusts different words so that they do not break in the middle    word-break  break-all   irrespective of whether it   s a continuous word or many words  breaks them up at the edge of the width limit   i e  even within the characters of the same word    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

User · Answer

At least in Firefox  as of v24  and Chrome  as of v30   when applied to content in a table element   word-wrap break-word   will not actually cause long words to wrap  which can result in the table exceeding the bounds of its container    word-break break-all   will result in words wrapping  and the table fitting within its container       jsfiddle demo

User · Answer

In addition to the previous comments browser support for word-wrap seems to be a bit better than for word-break

User · Answer

The W3 specification that talks about these seem to suggest that word-break  break-all is for requiring a particular behaviour with CJK  Chinese  Japanese  and Korean  text  whereas word-wrap  break-word is the more general  non-CJK-aware  behaviour

User · Answer

word-wrap has been renamed to overflow-wrap probably to avoid this confusion   Now this is what we have   overflow-wrap     The overflow-wrap 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    Possible values    normal  Indicates that lines may only break at normal word break points  break-word  Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line    source   word-break     The word-break CSS property is used to specify whether to break lines within words     normal  Use the default line break rule  break-all  Word breaks may be inserted between any character for non-CJK  Chinese Japanese Korean  text  keep-all  Don t allow word breaks for CJK text   Non-CJK text behavior is the same as for normal    source     Now back to your question  the main difference between overflow-wrap and word-break is that the first determines the behavior on an overflow situation  while the later determines the behavior on a normal situation  no overflow   An overflow situation happens when the container doesn t have enough space to hold the text  Breaking lines on this situation doesn t help because there s no space  imagine a box with fix width and height    So    overflow-wrap  break-word  On an overflow situation  break the words  word-break  break-all  On a normal situation  just break the words at the end of the line  An overflow is not necessary

User · Answer

This is all i can find out  Not sure if it helps  but thought I d add it to the mix   WORD-WRAP  This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element  this is similar in some ways to the    clip    and    overflow    properties in intent   This property should only apply if the element has a visual rendering  is an inline element with explicit height width  is absolutely positioned and or is a block element   WORD-BREAK  This property controls the line breaking behavior within words  It is especially useful in cases where multiple languages are used within an element

User · Answer

With word-break  a very long word starts at the point it should start  and it is being broken as long as required   X  I am a text that 0123 4567890123456789012345678 90123456789 want to live  inside this narrow paragr aph    However  with word-wrap  a very long word WILL NOT start at the point it should start  it wrap to next line and then being broken as long as required   X  I am a text that  012345678901234567890123 4567890123456789 want to live inside this narrow  paragraph

User · Answer

From the respective W3 specifications    which happen to be pretty unclear due to a lack of context    one can deduce the following    word-break  break-all is for breaking up foreign  non-CJK  say Western  words in CJK  Chinese  Japanese or Korean  character writings  word-wrap  break-word is for word breaking in a non-mixed  let us say solely Western  language    At least  these were W3 s intentions  What actually happened was a major cock-up with browser incompatibilities as a result  Here is an excellent write-up of the various problems involved   The following code snippet may serve as a summary of how to achieve word wrapping using CSS in a cross browser environment   -ms-word-break  break-all   word-break  break-all       Non standard for webkit     word-break  break-word   -webkit-hyphens  auto     -moz-hyphens  auto      -ms-hyphens  auto          hyphens  auto

User · Answer

There s a huge difference  break-all is basically unusable for rendering readable text   Let s say you ve got the string This is a text from an old magazine in a container which only fits 6 chars per row   word-break  break-all  This i s a te xt fro m an o ld mag azine   As you can see the result is awful  break-all will try to fit as many chararacters into each row as possible  it will even split a 2 letter word like  is  onto 2 rows  It s ridiculous  This is why  break-all is rarely ever used   word-wrap  break-word  This is a text from an old magazi ne   break-word will only break words which are too long to ever fit the container  like  magazine   which is 8 chars  and the container only fits 6 chars   It will never break words that could fit the container in their entirety  instead it will push them to a new line    x000D   x000D   lt div style  width  100px  border  solid 1px black  font-family  monospace   gt  x000D     lt h1 style  word-break  break-all   gt This is a text from an old magazine lt  h1 gt  x000D     lt hr gt  x000D     lt h1 style  word-wrap  break-word   gt This is a text from an old magazine lt  h1 gt  x000D   lt  div x000D   x000D   x000D

[css] What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

Examples related to css

Examples related to word-wrap