CSS tips: The difference between Word-wrap and Word-break

Content Summary: This article enumerated the compatible IE and FF the line-wrapping CSS recommendation style, introduced in detail the word-wrap and the word-break difference.

Line break CSS recommended style for IE and FF

The best way is

Word-wrap:break-word; Overflow:hidden;

Instead of

Word-wrap:break-word; Word-break:break-all;

Are not

Word-wrap:break-word; Overflow:auto;

In IE, there is no problem, under the FF, long string of English will be obscured beyond the content.

The difference between Word-wrap and Word-break

Word-wrap:

Normal Default. Content exceeds the boundaries of its container.

Break-word Content wraps to next line, and a word-break occurs when necessary. Triggers word-break if necessary.

Word-break:

Normal Default. Allows line breaking within words. Seems to be only working on Asian text.

Break-all behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-asian text. This is suited to Asian text that contains some excerpts of Non-asian text.

Keep-all does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all Non-asian languages. The This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.

Summarized as follows:

Word-wrap is the control of line wrapping.

When you use Break-word, you will force a newline. There is no problem in Chinese, English sentence is no problem. But for long strings of English, it doesn't work.

Break-word is to control whether the word is broken.

Normal is the default and the English words are not taken apart.

Break-all, is breaking the word. The next letter automatically comes to the next line when the word is to the boundary. Mainly solved the long string of English problems.

Keep-all refers to Chinese, Japanese, and Korean constant words. That is, only at this time, without Word-wrap, Chinese will not be changed line. (The English sentence is normal.) ）