CSS中word-wrap、word-break、white-space

一、word-wrap

word-wrap:normal(默认)|break-word;

参数

normal：允许内容顶开指定的容器边界。

break-word:内容将在边界内换行，必要时触发word-break（注意请分辨清楚word-break和break-word两个是不同的东西，一个为属性，一个为参数）;

说明

word-wrap是控制是否”为词断行”的，设置或检索当前行超过指定容器时是否断开转行。中文没有任何问题，语句也没有问题，但是对于长串的英文，就不起作用。

 

 

二、word-break

word-break:normal(默认)||break-all||keep-all Firefox、Opera不能识别

参数

normal: 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
keep-all: 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。

word-break:break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题（恰恰弥补了上面word-wrap:break-word对于长串文字不起作用的缺陷）。

 

 

 

三、white-space

white-space: normal(默认) | pre | nowrap

参数

normal: 默认。空白会被浏览器忽略。
pre: 空白会被浏览器保留。其行为方式类似HTML中的pre标签。
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。

 

说明

对于pre属性，其实就是HTML中连续的多个空白符会被合并，然后为了不让他合并（最常用的场合就是表示代码文字缩进）让其中的空白符继续保留而不需要我们增加额外的样式和标签来控制它的缩进和换行。pre标签的原理也是一样的内部默认有了个white-space:pre。

 

 

 

参考资料：   CSS中英文换行和不换行    http://www.studyofnet.com/news/404.html