About the CSS3 text wrapping method

One

Currently available for Mainstream support:

Text-overflow mainly resolves text overflow,

Value:clip[Default] | 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

Break-all	Allows line wrapping within a word.
Keep-all	You can only wrap at half-width spaces or hyphens.

Emphasis: The following commonly used three differences

By default: ① the end of the word: another line,

② long Word length and continuous letter: not broken

③ long word with dash: Conservative break

word-wrap:break-word  [  Span style= "font-size:20px;font-family: ' Microsoft Jas Black ', ' Microsoft Yahei '; Color:rgb (255,0,0);" > change ② ]

word-break:keep-all       Long words are too long and with dashes: do not break [  ] change ③ ]

word-break:break-all       the end of the word does not fit          : match broken [  Span style= "font-size:20px;font-family: ' Microsoft Jas Black ', ' Microsoft Yahei '; Color:rgb (255,0,0);" > change ① ]

                                             long Word is long and the letter is continuous: match break [ change ② ]

                                                         Long word too long with dash: Match break [  change ③ ]

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

This article from the "front-end Development Study Notes" blog, declined reprint!

About the CSS3 text wrapping method