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

1aae6d537db471b0921840a1044b68a1safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj94b3e26ee717c64999d7867364b1b4a3
1988bbf16ede8f4b3314902a5d209c2eThis is all English. This is all English. This is all English.94b3e26ee717c64999d7867364b1b4a3
1988bbf16ede8f4b3314902a5d209c2e全是中文的情况。全是中文的情况。全是中文的情况。94b3e26ee717c64999d7867364b1b4a3
1988bbf16ede8f4b3314902a5d209c2e中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.94b3e26ee717c64999d7867364b1b4a3复制代码

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!