CSS样式中文字的换行

在我们做输出时可能会遇到这样一个问题，就是汉字和英文字母相遇，然后自动换行的问题。例如，当我在输出产品标题时，由于产品名称比较长，包括汉字和英文字母，FF下浏览是正常的，而IE下面 英文会出现换行。当然，如果您是前端高手，纯粹是小菜一碟。于我而言，经常会忘记在样式里定义，就会出现这样的问题：在FF 里样式是如效果图一样，汉字和英文在同一行，而在IE下面，汉字和英文字母分别占据一行。这时只需在样式里设置： word-break: break-all;就可以解决问题了。

　　今天我就对这个知识点做个小总结，也算是自己学习一下吧。在css中强制换行有下面三个属性word-break、word-wrap、white-space。下面我对每一个属性进行一个介绍：

word-break 属性

属性值：normal |break-all |keep-all

参数：
normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文，应该使用break-all 。
补充实例：当设置了word-break:break-all ；假设div宽度为200px，它的内容就会到200px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。

word-wrap属性

属性值： normal | break-word
normal：控制连续文本换行。
break-word：内容将在边界内换行。

说明：

设置或检索当当前行超过指定容器的边界时是否断开转行。
补充实例：当设置了word-wrap:break-word ；例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。

white-space

属性值：normal | pre | nowrap | pre-wrap | pre-line | inherit
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

补充实例：white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

这里是禁止换行，让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。