CSS newlines: word-wrap & word-break & white-space & word-spacing

CSS newlines: word-wrap & amp; word-break & amp; white-space & amp; word-spacing Word-wrap:

First of all, the CSS attribute word-wrap has been renamed as overflow-wrap in CSS3, so the semantics is also made to avoid confusion with word-break;

• Reference:
  • Theoverflow-wrapProperty 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.
  • This means that when a word cannot be placed at the end of a row, it determines whether the word contains a newline character;
• Values:
  • Normal:
    • If the word is too long, I will give it a new line. The result will be long after the new line is entered. This product will be abandoned, and the labor and resources will not be changed, and you will be pushed out by brute force.
  • Break-word:
    • If the word is too long, it will be a line break. If it is longer after the line break, I will change it again. Good old man, please change it to your satisfaction;

Word-break:

• Reference:
  • The word-breakCSS property is used to specify whether to break lines within words.
  • This product is used to determine how to wrap a line in a word;
• Values:
  • Normal:
    • Use the default line feed rule
  • Break-all:
    • Any non-CJK (Chinese/Japanese/Korean) text can be broken.
  • Keep-all:
    • Line breaks in CJK (Chinese/Japanese/Korean) text are not allowed. line breaks can only be performed in spaces or hyphens. The behavior of non-CJK text is actuallynormal.

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

Seeing that some of our friends may be getting rough, "woks, Nima showed me that these two items are the same as the twins. Do not lie to me if you are reading less, spicy chicken!"

These two products are naturally different, otherwise W3C will not have to make it easier to distinguish them by name or by name.

See the figure below:

We can easily find the differences between # test1 and # test2:

Break-all is very violent. If you say it is all, you can use a line break;

However, in contrast, break-word is much more gentle. If you can't put it down, check if there is any line break in the line, such as space or CJK. If there is a line break, let go of the word and wrap it at that point, if there is no line break in the word;

White-space:

As mentioned above, word-wrap: break-word will confirm whether there is a line break before wrapping the word, including spaces or carriage return.

So another guy specifically controls the fate of space and carriage return:

Whether to merge spaces;

Whether the carriage return is interpreted as a line break;

Whether the sentence is too long to line with spaces;

Values:

Normal: white space is ignored by the browser;

Pre: white space is retained by the browser;

Nowrap: text does not wrap
Tag ends;

Pre-wrap: Reserved blank sequence, normal line feed;

Pre-line: merges the blank sequence and retains the linefeed;

Inherit: inherits the features of the parent element.

Word-spacing:

This guy has little to do with the above, but it just looks a little like it. It sets the word spacing and its usage is also super simple:

P {
Word-spacing: 30px;
}

Seeing that there is a sense that CSS is a little abnormal, there is no way. Who calls it accumulation? Complete