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

This article mainly introduces how to use forced word break:break-all in css, which has certain reference value. Interested friends can refer to it. I hope you will have a lot of gains after reading this article. Let Xiaobian take you to understand it together.

Solution (IE, chrome,FF as test browser):

{ word-break:break-all;

word-wrap:break-word;

}

The following is an explanation of the difference between the two methods:

1, word-break:break-all For example div width 200px, its content will automatically wrap to 200px, if there is an English word at the end of the line is very long (congratulations, etc.), it will truncate the word, so that the end of the line is conra(the front part of the congratulations), and the next line is the back part of the tuation (conguatation).

2, word-wrap:break-word example is the same as above, but the difference is that it will consider the whole word as a whole, if the end of the line is not wide enough to display the whole word, it will automatically put the whole word on the next line, rather than truncating the word.

3, word-break:break-all Supported versions: IE5 and above This behavior is the same as normal for Asian languages. Any intra-word breaks in non-Asian language text lines are also allowed. This value is appropriate for Asian text that contains some non-Asian text.

word-wrap:break-word Supported versions: IE5.5 + will wrap within boundaries. If necessary, word-breaks will also occur. The table automatically wraps to avoid spreading.

Syntax: word-break:normal| break-all| keep-all

Parameters: normal: Allow line breaks within words according to Asian and non-Asian text rules

break-all: This behavior is the same as normal for Asian languages. Any intra-word breaks in non-Asian language text lines are also allowed. 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 breaks are not allowed. Suitable for non-Asian text containing small amounts of Asian text

Syntax: word-wrap:normal| break-word

Parameter: normal: Allow content to push open specified container boundary

break-word: Content will wrap within boundaries. If desired, word-breaks also occur Description: Sets or retrieves whether a word-break occurs when a line goes beyond the boundaries of a specified container.

Recommendation: word-break with 3C detection will show problems, leading to Baidu snapshots will also have problems-this attribute OPERAFIREFOX browser does not support word-break attribute can be replaced with white-space:normal;, so that in FireFox and IE can be correctly newline, and note that spaces between words can not be used instead, otherwise it can not be correctly newline.

Thank you for reading this article carefully. I hope that Xiaobian will share the article "How to use forced word break:break-all in css". This article is helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

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.