css常用属性区分

word-wrap和word-break

默认情况下,当一个单词很长放不下的时候, browser会把他挪到下面一行.
但是如果单词太长并且找不到自然断点, 被挪到下面一行后也会溢出父容器.

word-wrap(换行)

如果空间不够, 会尝试把长单词挪到下面一行, 如果新的一行空间不够, 则单词内断句.

这里写代码片

用来指定是否允许浏览器在word中断句.
当一个字符串太长但是找不到他的自然断点时, 可以不换行, 直接断句, 防止溢出.

word-break(断句)

指定是否或如何在words中断行

//让长单词不会被挪到下一行去,直接在父容器的右边界断开
word-break: break-all;

相同与不同

相同

word-wrap:break-word照样能把一个长串英文或数字拆成多行

不同

word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

组合

//强制断句
word-wrap: break-word;
word-break: break-all;