div｛

display: block;

width: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里可不行