css属性white-space、word-wrap和word-break

有时会使用到文本换行，但新添加了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

参考：网上资料