CSS Learning notes: Text wrapping display (word-wrap)

The text wrapping property is newly defined in CSS3, Word-wrap:

• The Nomal property value indicates that continuous text wrapping is controlled.
• The Break-word property value indicates that the content will wrap within the bounds. Word Wrapping (Word-break) also occurs if desired.

Comparative analysis of line-wrapping technology

IE defines a number of line-wrapping properties: Line-break, Word-break, Word-wrap, and CSS1 defines WHITE-SPACE,CSS3 added Word-wrap.

• Line-break is specifically responsible for controlling Japanese line breaks.
• The Word-wrap property can control line breaks. When the property value is Word-wrap, the line will be forced, there is no problem with the Chinese text, and the English sentence is OK. But the long string of English does not work, Word-wrap:break-word is to control whether the word is broken, rather than the character breaker.
• The Word-break property mainly controls line wrapping for Asian and non-Asian languages. When the property value is Break-all, you can allow any word in a non-Asian text line to break. When the property value is Keep-all, the word break is not allowed in Chinese, Japanese, or Korean.
• The White-space property has visual text effect, and when the property value is nowrap, it forces the display of all text within the same line. When the property value is pre, a predefined text format is displayed.

Under IE, use Word-wrap:bireak-word; Declaration to make sure all text is displayed properly.

In the Firefox browser, the Chinese will not have any problems, the English sentence will not have problems, but long strings of English will be problematic . In order to solve the problem of long string of English, the general Word-wrap:break-word; and word-break:break-all; declarations are used together . However, this method causes the normal English word to be disconnected.

In order to solve this problem, Word-wrap:break-word;overflow:hiddencan be used instead of word-wrap:break-word;word-break:break-all; Word-wrap:break-word;overflow:hidden, there is no problem under IE, but in Firefox, a long list of English words will be covered.

CSS Learning notes: Text wrapping display (word-wrap)