作者：乔山办公网日期：
返回目录：word文档
有时会用到文本换行，但新增了css3的属性，导致傻傻分不清楚，总结下white-space、word-wrap和word-break使用
white-space
如何处理文本中的空白符（比如空格和换行符）。
常用:normal | nowrap
- normal 默认。空白会被浏览器忽略。
- nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
- 标签为止。
常用场景：单行文本溢出使用省略号代替
.css{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
关于多行文本溢出使用省略号代替，则利用-webkit-line-clamp：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
总结：white-space用来设置CJK(中文、日文、韩文)文本是否不折行，实际中大多是要用white-space:nowrap来让文本不折行。
word-wrap
css3属性，允许长单词或 URL 地址换行到下一行。
常用:normal | break-word
- normal 只在允许的断字点换行（浏览器保持默认处理）。
- break-word 在长单词或 URL 地址内部进行换行。
总结：word-wrap用来设置非CJK文本是否折行（因为CJK文本会自动折行），如果空间足够，不会对单词内部进行截断
word-break
css3属性，规定自动换行的处理方法。
常用:normal | break-all | keep-all
- normal 使用浏览器默认的换行规则。
- break-all 允许在单词内换行。
- keep-all 只能在半角空格或连字符处换行。
总结：word-break用来设置非CJK文本是否折行，可以使用break-all对单词内部进行折行
PS:如果用了white-space为nowrap，设置其他的强制折行（word-break）是不起作用的，要将white-space设置为normal
参考：网上资料