The difference between word-break, word-wrap, and white-space in css

Examples of the differences between word-break, word-wrap, and white-space in css. Friends who need it can refer to

HTML code for testing

<p class="c1">safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</p>
<p class=c1>This is all English. This is all English. This is all English.</p>
<p class=c1>全是中文的情况。全是中文的情况。全是中文的情况。</p>
<p class=c1>中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.</p>复制代码

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, and other browsers will only overflow but not open it

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;}

Under IE6, long English characters and long Chinese sentences will open the container. IE7 and IE8 will overflow directly. Under 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 wrap lines

The code is as follows:

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

Same as the first case

The code is as follows:

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

All are opened under IE6, and all overflow under IE7, IE8, and Firefox

The code is as follows:

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

Same as 7

The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

css Explanation of background:transparent

The above is the detailed content of The difference between word-break, word-wrap, and white-space in css. For more information, please follow other related articles on the PHP Chinese website!