The difference between forcing a newline word-break, Word-wrap, and White-space in CSS

CSS forced line word-break, Word-wrap, White-space Difference instance description, the need for friends can refer to the following

The HTML code for the test

<p class= "C1" >safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</p><p Class=c1>This is all 中文版. This is all 中文版. All english.</p><p class=c1> are in Chinese. It's all in Chinese. It's all in Chinese. </p><p class=c1> in Chinese and English mixed in the situation. Chinese and 中文版. In Chinese and English mixed row situation. Chinese and english.</p> Copy code

The code is as follows:

. c1{width:300px;word-break:normal;border:1px solid Red;} [Object Object]

If the content is a long English string, IE6 will open the container, other browsers will only overflow, will not open

The code is as follows:

. c1{width:300px;word-break:break-all;border:1px solid Red;}

Long English strings cannot be wrapped in Firefox.

The code is as follows:

. c1{width:300px;word-break:keep-all;border:1px solid Red;}

IE6, English long words A and Chinese long sentences will open the container, IE7, IE8 Direct overflow, Firefox only long English strings will overflow.

The code is as follows:

. c1{width:300px;word-wrap:normal;border:1px solid Red;}

This is the same as the first case.

The code is as follows:

. c1{width:300px;word-wrap:break-word;border:1px solid Red;}

All browsers are wrapped.

The code is as follows:

. c1{width:300px;white-space:normal;border:1px solid Red;}

Same as in the first case.

The code is as follows:

. c1{width:300px;white-space:pre;border:1px solid Red;}

IE6 under all open, IE7, IE8, Firefox all overflow

The code is as follows:

. c1{width:300px;white-space:nowrap;border:1px solid Red;}

Same as 7

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!