CSS wrapping know how: Word-wrap && word-break && white-space && word-spacing

Word-wrap:

First of all, Word-wrap this CSS property in CSS3 has been renamed to Overflow-wrap, so semantic is also to avoid confusion with word-break;

• Reference:
  • The property was overflow used to specify whether or not the browser could break lines within words in order to PR -wrap Event overflow when a otherwise unbreakable string is too long to fit in its containing box.
  • This goods is in line at the end of a word, determine whether the word inside is allowed to break the guy;
• Values:
  • Normal
    • The word is too long, I will try to change the line, the result after the line is long, the goods will be altogether, Labor and Labour do not change, direct violence to you poke out.
  • Break-word:
    • Words too long, on the line, after the line or long, we will change, good, for your satisfaction;

Word-break:

• Reference:
  • The word-break CSS property was used to specify whether to break lines within words.
  • The goods are used to decide how to change the words within the word;
• Values:
  • 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.

Word-wrap:break-word VS Word-break:break-all

See this may have small partners to explode, "lying trough, I see this is said in the two goods are twins the same son, read less cheat, spicy chicken!" ”

These two goods are naturally different, otherwise W3C will not bother to let the former vanish to distinguish between them.

Here is a look at the following illustration:

We compare #test1 and #test2 easily find the difference:

Break-all is very violent, whatever word you say, it is all, and all the other lines;

But compared to Break-word is a lot more gentle, if not put, first look at the bank there is no place to change, such as space or CJK, if there is to let go of the word, at the point of the line, if there is no word within the line;

White-space:

As stated above, Word-wrap:break-word will confirm if there is a line break before the word is wrapped, including a space or carriage return.

So there's another guy who specifically controls the space and the fate of the carriage return:

Whether the space is merged;

Whether the carriage return is interpreted as a folding line;

Whether the sentence is too long to wrap in a space;

See this feeling CSS really a bit sick, no way, this is a process of accumulation;

There's a phone call, go home and write ~

CSS wrapping know how: Word-wrap && word-break && white-space && word-spacing