Introduction to the method of using CSS3 text wrapping

1.

Currently supported by the mainstream:

text-overflow mainly solves text overflow,

Value: clip[default value] | ellipsis | string (Firefox only)

Cooperate with white-space : nowrap ; overflow : hidden Use

2,

word-wrap

Value: normal [ Default value] | break-word

--Long word line break

word-break

Value: normal [Default value] | break-all | keep-all

--Line breaking rules for non-CJK ("Chinese, Japanese and Korean") scripts

Unwritten rules - by default (without writing any styles) Display rules):

① The end of the word cannot be placed: start a new line,

② The long word is too long and the letters are consecutive: do not break

③ The long word is too long and has a Dash: Conservative break

Key point: The difference between the following three commonly used styles to improve the above three unspoken rules

Word-wrap: break-word Long words are too long and the letters are consecutive: Analyze break

                                                                                                                                                                                                                                   ​                                                                                    Rules ①② remain unchanged]

word-break: break-all The end of the word cannot fit: break at the same time

Break at the same time Long words are too long and the letters are consecutive: break at the break

                                            Long and with dashes: consistent break

Conservative break is broken according to a certain format, consistent break is not leaving any border blank of breaking

The above is the detailed content of Introduction to the method of using CSS3 text wrapping. For more information, please follow other related articles on the PHP Chinese website!