您的位置：首页 > Web前端 > css > 正文

word-wrap和break-word的区别

更多时间：2014-4-27 类别：Web前端浏览量：1568

word-wrap和break-word的区别

word-wrap和break-word的区别

一、文本布局经常出现，换行混乱的情况

1、如果是全英文字符串,中间不包含任何符号(包括空格)，不自动换行.
2、中英文混写，则在英文字符串的开始处换行（英文长度>li长度），结尾处不换行。
3、英文整个单词换行。

二、css控制换行的方法

1、word-wrap:normal | break-word; (内容换行)
normal:默认的属性值.（允许内容顶开指定的容器边界）.
break-word:内容将在边界内换行(不截断英文单词换行，截断英文单词下面的属性才具备这个功能。)

2、word-break:normal | break-all | keep-all (词内换行)

normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
break-all : 强行换行,将截断英文单词
keep-all : 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单

词也整个换行,注意:如果出现某个英文.字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.

三、word-wrap和break-word的区别

1、word-wrap:

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。它会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

2、word-break:

css的 word-break 属性用来标明怎么样进行单词内的断句。它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。如果想更节省空间，那就用word-break:break-all。

3、word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句

4、不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了

四、word-wrap同break-word实例

HTML 代码复制


<style>...
 .c1{...}{ width:300px;   border:1px solid red}
 .c2{...}{ width:300px;word-wrap:break-word;   border:1px solid yellow}
 .c3{...}{ width:300px;word-wrap:break-word;word-break:break-all;   border:1px solid green}
 .c4{...}{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
 .c5{...}{ width:300px;word-break:break-all;   border:1px solid black}
 .c6{...}{ width:300px;word-break:keep-all;   border:1px solid red}
 .c7{...}{ width:300px;word-wrap:break-word;overflow:auto;   border:1px solid yellow}
</style>

<li class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</li>
<li class=c1>
This is all English. This is all English. This is all English.
</li>
<li class=c1>
全是中文的情况。全是中文的情况。全是中文的情况。
</li>
<li class=c1>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</li>

<br>
<li class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</li>
<li class=c2>
This is all English. This is all English. This is all English.
</li>
<li class=c2>
全是中文的情况。全是中文的情况。全是中文的情况。
</li>
<li class=c2>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</li>

<br>
<li class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</li>
<li class=c3>
This is all English. This is all English. This is all English.
</li>
<li class=c3>
全是中文的情况。全是中文的情况。全是中文的情况。
</li>
<li class=c3>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</li>

<br>
<li class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</li>
<li class=c4>
This is all English. This is all English. This is all English.
</li>
<li class=c4>
全是中文的情况。全是中文的情况。全是中文的情况。
</li>
<li class=c4>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</li>

<br>
<li class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</li>
<li class=c5>
This is all English. This is all English. This is all English.
</li>
<li class=c5>
全是中文的情况。全是中文的情况。全是中文的情况。
</li>
<li class=c5>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</li>

<br>
<li class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</li>
<li class=c6>
This is all English. This is all English. This is all English.
</li>
<li class=c6>
全是中文的情况。全是中文的情况。全是中文的情况。
</li>
<li class=c6>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</li>

<br>
<li class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</li>
<li class=c7>
This is all English. This is all English. This is all English.
</li>
<li class=c7>
全是中文的情况。全是中文的情况。全是中文的情况。
</li>
<li class=c7>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
</li>

标签：word-wrap 换行 break-word

上一篇：rel=nofollow的作用

下一篇：html标签的嵌套规则

您可能感兴趣

word-wrap和break-word的区别

word-wrap和break-word的区别

热门推荐

排行榜