The difference between word-break, word-wrap, and white-space in css-CSS Tutorial-php.cn

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

safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj

This is all English. This is all English. This is all English.

全是中文的情况。全是中文的情况。全是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.

复制代码

Copy after login

The code is as follows:

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

Copy after login

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

Copy after login

Long English strings cannot be wrapped in Firefox

The code is as follows:

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

Copy after login

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

Copy after login

This is the same as the first case

The code is as follows:

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

Copy after login

All browsers wrap lines

The code is as follows:

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

Copy after login

Same as the first case

The code is as follows:

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

Copy after login

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

Copy after login

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!