Shulou(Shulou.com)06/01 Report--

Editor to share with you what is the use of the word-break attribute in css3, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Definition

The word-break attribute specifies the handling of automatic line wrapping. Tip: by using the word-break attribute, you can let the browser wrap lines anywhere.

2. Syntax and parameters

Word-break: normal (default) | break-all | keep-all normal: according to the text rules of Asian and non-Asian languages, line wrapping is allowed within a word: Chinese characters wrap to the boundary, and the whole word wraps in English. If a word is too long, it will break the container. If the border is a fixed attribute, the latter part will not be displayed. This behavior is the same as normal for Asian languages. Disconnection within any word of a non-Asian language text line is also allowed. This value is suitable for Asian text that contains some non-Asian text. For Chinese, Korean and Japanese, word disconnection is not allowed. In other words, if it is Chinese, a Chinese character phrase in the front and back punctuation marks will be completely wrapped, and the English word will also be completely wrapped. Note: Firefox and Opera are not recognized.

3. Description

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

4. Examples

Continue to use the word congratulation above to belong to a long list of English, word-break:break-all it will truncate the word, the end of the line will become similar to conra (the front part of congratulation), the back part of the next behavior tulation (conguatulation). Word-break:keep-all refers to the continuous words Chinese, Japanese and and Korean. That is to say, only at this time, without word-wrap, Chinese will not change the line. (the English sentence is normal. )

5. Summary

The scope of action is only standard block-level elements such as div, while table elements such as th,td are recognized but have no effect (after testing that word-break:break-all is effective under Chrome, but from the point of view of full compatibility and convenient memory, the previous conclusion still prevails). Firefox,Opera does not recognize word-break, not to mention the effect of using word-break in th,td under Firefox.

The above is all the content of the article "what is the use of word-break attributes in css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.