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

This article mainly explains "what are several attributes related to line breaks in CSS". The explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the attributes related to line breaks in CSS?"

Word-wrap

Normal default value. Allows content to top up the specified container boundary.

The break-word content will wrap within the boundary. If necessary, word wrapping will also occur.

Vernacular explanation: that is to say, if a very long English word exceeds the length of the container, whether the English word is broken or not, the default is not broken.

Support: test passed in IE, Firefox 3.6and Chrome 4.

Word-break

Normal default value. Word wrapping is allowed in accordance with the text rules of Asian and non-Asian languages.

Break-all this behavior is the same as normal in 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.

Keep-all is the same as normal in all non-Asian languages. For Chinese, Korean and Japanese, word disconnection is not allowed. Suitable for non-Asian texts that contain a small amount of Asian text.

Vernacular explanation: break-all divides English words into one, just like Asian words can be taken apart separately; keep-all treats a long list of Asian characters as one English word.

Support: IE supports all; Firefox 3.6 does not support all; Chrome 4 does not support keep-all.

White-space

Normal default value. Default processing method. Text automatically handles line breaks. If the container boundary is reached, the content will go to the next line.

Pre line feeds and other white space characters are protected. This value requires IE6+ or! DOCTYPE to declare standards-compliant mode support. If the! DOCTYPE declaration is not specified as standards-compliant mode, this property can be used, but it will not work. The result is equivalent to normal.

Nowrap forces all text to be displayed on the same line until the text ends or encounters a br object.

Vernacular explanation: there are a few spaces in the pre source code, there are several spaces in the display; there are carriage returns in the source code, and there are also line feeds in the source code. Nowrap does not break lines without br, even if the Chinese characters exceed the container size.

Support: passed the test in IE, Firefox 3.6 and Chrome 4, but please refer to the above instructions for the support of pre in IE.

Line-break

Normal default value. Applies the default line wrapping rule for Japanese text.

Strict enforces the rigor of Japanese text wrapping rules.

Application

If you encounter a long English word, break the word directly.

Word-wrap:break-word

Some people use break-word:break-all, but for compatibility, word-wrap:break-word; is recommended.

Don't break the line anyway unless you encounter br.

White-space:nowrap

Attachment: the difference between word-wrap:break-word and word-break:break-all

Word-wrap:break-word is a priority word (words are judged by spaces), while word-break:break-all does not treat words as words at all, in its eyes, they are all chunks of characters.

This leads to two situations:

If a p is 100px wide and there is a long space-free English character that completely exceeds 100px, both behave the same, truncating the characters at the boundary.

If a p is 100px wide, there are paragraphs in both Chinese and English, which are preceded by Chinese and occupy 70px, followed by a very long English word with 50px. For word-wrap:break-word, the word is folded to the next line of output, while word-break:break-all uses the remaining 30px to output the first half of the word, and then goes to the next line to output the remaining 20px.

Support:

Word-wrap:break-word is supported by many browsers

Word-break:break-all is supported by fewer browsers.

Thank you for your reading, these are the contents of "what are the attributes related to line breaks in CSS?" after the study of this article, I believe you have a deeper understanding of several attributes related to line breaks in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.