区分 word-wrap/word-break/white-space

word-wrap 属性 设置如何处理元素内的空白(空白:单词之间的空格等)

word-wrap: normal  (浏览器默认换行规则)只允许在断字点换行

word-wrap: break-word  在长单词或URL地址内部进行换行

 

word-break 属性 规定自动换行的处理方法

word-break: normal  (浏览器默认换行规则)只允许在断字点换行 (同word-wrap: normal)

word-break: break-all  允许在单词内(非CJK:Chinese/Japanese/Korean)换行

word-break: keep-all   只能在半角空格或连字符处换行(Safari8/9不支持)

区别word-break: break-all word-wrapbreak-word:

word-wrap: break-word  带有空格的地方或者CJK就会作为可换行的点,很容易出现一片一片的空白区域

word-break: break-all  所有都换行

记忆:wbba (微博吧)  ,wbbw (我五百万)

 演示地址:http://www.zhangxinxu.com/study/201511/word-break-break-all-word-wrap-break-word.html

word-spacing: 是单词之间的间距

white-space: 字符是否换行显示

white-space: normal (默认: 文本会换行,区别于上面的两个概念,上面两个讲的是文本内单词word的情况)

white-space: nowrap 文本不会换行,文本会在同一行上继续,直到遇到<br>标签为止

white-space: pre  空白会被浏览器保留,类似于<pre>标签

white-space: pre-wrap  保留空白符并正常换行

white-space: pre-line: 合并空白符序列,但是保留换行

white-space: inherit  从父元素继承该属性

例子:规定段落中的文本不换行

p { white-space: nowrap}

  ------------>        

原文地址:https://www.cnblogs.com/benbendu/p/7448784.html