The difference between Word-break:break-all and Word-wrap:break-word

Understanding Word-break Properties

/* keyword value */word-break:normal; Word-break:break-all; word-break:keep-all;/* Global value */word-break:inherit;word-break:initial;word-break:unset;

Normal

Use the default line-wrapping rule.

Break-all

Allows word breaks between any non-CJK (Chinese/japanese/korean) text.

Keep-all

Word wrapping in CJK (Chinese/japanese/korean) text is not allowed and can only be wrapped in half-width spaces or hyphens. The behavior of non-CJK text is actually and normal consistent.

Where break-all this value is supported by all browsers. But keep-all this is not the case, although there is a certain development and progress –CHROME44 formally supported, but the iOS SAFARI8/9 are not supported (the table below the yellow-green expression is not supported keep-all ). In other words, the mobile side is not yet suitable for use word-break:keep-all .

Understanding Word-wrap Properties

/* Keyword value */word-wrap:normal;word-wrap:break-word;/* global value */word-wrap:inherit;word-wrap:initial;word-wrap:unset;

　　

The meanings of several keyword values are as follows:

Normal

This is the normal line-break rule that everyone usually sees the most.

Break-word

There is really no other line in a line of words to break the line.

word-break:break-all as its name, all the lines are wrapped. No mercy, no gaps are spared. And word-wrap:break-word then with compassion, if this line of text has a line that can be wrapped, such as a space, or CJK (Chinese/japanese/korean) (Chinese/Japanese/Korean) and the like, then do not hit the idea of English words or characters, let these line-break point line, as for the right alignment, Not good looking, then don't care.

is the spacing between the words, whether the characters are wrapped in a line display.

word-spacing white-space

The difference between Word-break:break-all and Word-wrap:break-word