Tutorial on using word-break attribute in css3

We know that there is a very important attribute in CSS3 word-break attribute, so today I will introduce to you the word-break attribute. Definition, syntax, parameters and a short example using word-break to help everyone understand.

1. Define the

word-break attribute to specify the processing method of automatic line wrapping. Tip: By using the word-break attribute, you can let the browser break a line at any position.

2. Syntax and parameters

word-break: normal (default)|break-all|keep-all normal: According to the text rules of Asian languages ​​and non-Asian languages, allowed within the word Line wrap: Chinese will wrap to the Chinese characters at the boundary, and English will wrap the entire word. If a word is too long, it will break the container. If the border is a fixed attribute, the subsequent parts will not be displayed. break-all: You can forcibly truncate English words and force new lines. The behavior is the same as normal for Asian languages. Breaks within any word of a line of non-Asian language text are also allowed. This value is suitable for Asian text that contains some non-Asian text. keep-all: Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. That is, if it is Chinese, a Chinese character phrase within the preceding and following punctuation marks will be completely wrapped, and the English word will also be completely wrapped. Note: Firefox and Opera cannot recognize it.

3. Description

word-break:break-all is a break word. When a word reaches a boundary, the next letter automatically goes to the next line. It mainly solves the problem of long strings of English (it just makes up for the above defect that word-wrap:break-word does not work for long strings of text).

4. Example

Continuing with the above word congratulation, which belongs to a long string of English words, word-break:break-all will truncate the word, and the end of the line will become something like conra(congratulation The front-end part), the next line is the back-end part of tulation (conguatulation). Word-break:keep-all refers to Chinese, Japanese, and Korean continuous words. That is to say, if you only use this time without word-wrap, the Chinese will not wrap. (English sentences are normal.)

5. Summary

The scope is only standard block-level elements such as div. Table elements such as th and td are recognized but have no effect (tested under Chrome word-break:break-all is effective, but from the perspective of complete compatibility and convenient memory, the previous conclusion shall prevail). Firefox and Opera cannot recognize word-break, let alone the effect of using word-break in th and td under Firefox.

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Using CSS3 to create a gradually glowing square border implementation steps

How about the animation properties of CSS3 Using

Tutorial on using H5 to create water drop effects

The above is the detailed content of Tutorial on using word-break attribute in css3. For more information, please follow other related articles on the PHP Chinese website!