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

不言
Release: 2018-06-12 11:25:35
Original
2878 people have browsed it

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>复制代码
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template