关于word-break和word-wrap的总结

两者皆可实现断词的效果，看定义我是懵逼的，没办法，只能直接上demo

image.png

样式定义如下

.test {
    width: 300px;
    height: 500px;
    margin: 50px;
    background: green;
    float: left;
  }
  .wordBreak {
    word-break: break-all;
  }
  .wordWrap {
    word-wrap: break-word;
  }

比较之后可以发现，如果不采用断词，会超出dom，这显然不是我们要的效果，word-wrap:break-word会单独起一行，如果单词一行显示不全，则新起一行，但是word-break:break-all，则很暴力，完全不浪费一点空间，只要到达了dom边界，直接断词，另外word-break还有一个属性break-word，这和word-wrap:break-word效果一致