work-break: break-all和word-wrap: break-word的区别？
一直以来，对
work-break和word-wrap都是止于使用，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，还没有深入去探究两者的区别。鉴于最近常常遇到，便来加深一下了解！CSS中的
work-break和word-wrap都是跟换行有关的，下面先来分别看看两种的用法。1. work-break
word-break 指定了怎样在单词内断行。
word-break: normal
word-break: break-all
word-break: keep-all
/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;
值：
normal：使用默认的断行规则。
break-all：对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all：CJK 文本不断行。 Non-CJK 文本表现同 normal。
浏览器兼容性：
有些浏览器(Chrome, Safari)还支持一个非标准的：
word-break: break-word，作用类似word-wrap: break-word.2. word-wrap(overflow-wrap)
在CSS3中
word-wrap也称为overflow-wrap，用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
值：
normal：表示在正常的单词结束处换行。
break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被被分割的单词会被强制分割换行。
注意：稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法(overflow-wrap)。
浏览器兼容性：
3. work-break: break-all和word-wrap: break-word的区别?
直接上例子：
从上面的结果可以看到，同样是切割单词换行，但是
word-break: break-all是会挤满整个剩余空间再换行，而word-wrap: break-word是会直接换行，后面留了一大片空白。知识有限，如果有错误，欢迎在下方留言！
关注”全栈技术杂货铺“
