Introduction to using CSS3 Text wrapping method

One

Currently available for Mainstream support:

Text-overflow mainly resolves text overflow,

Value: clip[Default value] | ellipsis | String (only Firefox is supported)

cooperate with White-space:nowrap; Overflow:hidden use

Two

Word-wrap

Value: normal [default] | Break-word

--Long Word line change

Word-break

Value: normal [default] | Break-all | Keep-all

--Non-CJK ("CJK") script break rules

Unspoken rules--By default (no display rules are written for any style):

① the end of the word: another line,

② long Word length and continuous letter: not broken

③ long word with dash: Conservative break

Emphasis: The following three styles commonly used to improve the above 3 kinds of unspoken rules of the difference

Word-wrap:break-word long Word length and continuous letter: Anastomosis break

[Change ② unspoken rules ①③ unchanged]

Word-break:keep-all long words with dashes: do not break

[Change ③ unspoken rules ①② unchanged]

Word-break:break-all the end of the word: anastomosis break

Long word is long and the letter is continuous: anastomosis break

Long words are too long and with dashes: anastomosis breaks

[Strongest: Unspoken rules ①②③ all changes]

A conservative break is broken in a certain format, and a break is a break without leaving any boundary blanks.