Tutorial on using Word-break properties in CSS3

We know that there is a very important attribute Word-break attribute in CSS3, so we will introduce the definition of word-break attribute, syntax, parameters and use Word-break to make a small case to help you understand.

1. Definition

The Word-break property specifies how the wrap is handled. Tip: By using the Word-break property, you can let your browser implement line breaks anywhere.

2. Syntax and parameters

Word-break:normal (default) |break-all|keep-all normal: According to the Asian and non-Asian text rules, allow word wrapping: Chinese to the boundary of the Chinese character line, English word wrap, if a word length is too long, The container will burst, and if the border is a fixed property, then the later section will not display. Break-all: Can forcibly truncate the English word, forcibly wraps the line. The behavior is the same as the normal for Asian languages. Also allows non-Asian-language text lines to be broken within any word. This value is appropriate for Asian text that contains some non-Asian text. Keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, Japanese, word break is not allowed. That is, if it is Chinese, it will wrap a Chinese character phrase inside and around the punctuation, and the English word can be wrapped in the whole line. Note: Firefox and opera are not recognized.

3. Description

Word-break:break-all, is to break the word. The next letter is automatically to the next line when the word is to the border. The main solution to the long string of English problems (just make up the above word-wrap:break-word for long strings of text does not work on the defect).

4. Example

Continue to congratulation the word belongs to the long string of English, Word-break:break-all it will cut the word, the end of the line will become similar to CONRA (congratulation of the front part), The backend portion of the next behavior tulation (conguatulation). Word-break:keep-all, refers to Chinese, Japanese, and Korean constant words. That is, only use this time, do not word-wrap, Chinese will not be changed line. (The English statement is normal.) ）

5. Summary

The scope of the function is only a div, such as standard block-level elements, th,td such table elements, although recognized but not effective (tested chrome under Word-break:break-all is effective, but according to the full compatibility of the convenient memory point of view or the previous conclusions prevail). Firefox,opera is not recognized word-break, not to mention the TH,TD under the Firefox use Word-break effect.

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

Using CSS3 to make the gradual glow of the square border implementation steps

How animated properties of CSS3 are used

Using H5 to make water droplet effects tutorials