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

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.

3 years ago

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.

3 years ago

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.

3 years ago