white-space、word-break、word-wrap和text-overflow

http://www.w3cfuns.com/blog-5420562-5396452.html

div{
display: block;
200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

这段代码我想有经验的都知道,但是随后问题来了,我在chrome里效果实现了,而在ie里却没能实现,完全没效果,一开始以为是text-overflow: ellipsis;这个属性兼容性问题,但通过一顿谷歌后所有的文章都基本上是这么实现“……”这个的,然后我在ie里查找原因,之后我发现了一个很有意思的事,因为做网站用了一个reset.css,里面有“word-wrap:break-word”这样一段代码,我想不用说用意大家也知道什么原因!说这里我想有些人恍然大悟,知道为什么ie里为什么会出现用“text-overflow: ellipsis;”这个CSS不能出现省略号的原因了;
下面我总结了一下white-space、word-break、word-wrap这些属性的作用、区别和优先级,同时纠正一下网上一些文章的错误:


word-wrap : normal | break-word

norma: 默认值。允许内容顶开指定的容器边界break-word: 内容将在边界内换行。如果需要,词内换行( word-break )也将发生
white-space : normal | pre | nowrap | pre-wrap | pre-line
norma默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pr换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。
nowra强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。
pre-wrap:保留空白符,自动进行换行,不会有滚动条
pre-line:合并空白符,保留换行符;

word-break : normal | break-all | keep-all
normal:默认值。允许在词间换行
break-all:该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all:与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

自动换行word-break:break-all和word-wrap:break-word的区别 word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于:
1,word- break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该 行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。 
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
word-break;break-all 支持版本:IE5以上  该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

如上是三者之间的区别和作用,在我谷歌查找三者相关文章的时候发现很多博主认为只要设置了“white-space:nowrap;”这个属性,其他的两个属性是什么都没关系,因为“white-space:nowrap;”这个属性优先级最高,由我今天的BUG发现也不尽然,在ie里这个属性并不是优先级最高的,所以日后大家遇到相同的BUG一定要看看是不是另两个属性在作怪,在FF和chrome下“white-space:nowrap;”这个属性可能优先级最高,但是ie里可不行

原文地址:https://www.cnblogs.com/lccnblog/p/3296524.html