Some questions about character wrapping in CSS

We are dealing with the content of the article in the process because the content of the article mixed with Chinese, English, numerals and other characters, and our common English and the number is unable to wrap elements in the automatic line, which will often lead to the elements are bursting, as shown in the following figure:

CSS in Word-break can solve this problem, write a test page to make a note

CSS code:

body{font-size:14px;}  p{border:solid 1px red;width:200px;}

HTML code:

 English Chinese Chinowen englis333henglishenglishenglish Chinese English Chinese Chinese Chinoven Chinoven Chinoven        123ewewee
123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglis Henglishenglishenglish 

At this point the operating effect such as the opening of the premises said that the following P tags add some style

CSS code:

. test{Word-break:break-all;}

The effect is as follows:

You can find that all the text, whether Chinese or English or digital, can automatically force a career change at the end of the p tag of the package, which will have a problem that would have been a combination of strings split to see the effect, and then look at a

CSS code:

. test {word-break:hyphenate;}

The effect is as follows:

This CSS will probably burst the wrapping element's character segment at the hyphenation point to wrap the line in advance

Look again

CSS code:

. test{Word-break:keep-all;}

The effect is as follows:

Wraps a line between all character and character segments, preserving the integrity of all character segments. Bursting package elements

Word-break also has some properties:

CSS code:

. test{Word-break:normal;} /* Browser Default line break * *

If you do not need to maintain the integrity of the word, break-all can solve the problem of bursting containers, because in the actual application process will not have a length of more than a container width of words, so hyphenate can solve the word is complete and can not burst the container, Second, in some scenarios can use the scroll bar or Overflow:hidden to maintain the integrity of the interface.