因为总是记不住强制换行的三个属性(尽管我记笔记，让自己能够很快找到)

white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-all;

所以我决定仔细研究一下这三个属性在强制换行中起到的作用，通过加深印象的方式提升记忆力

不查不知道，一查吓一跳！

因为white-space 是控制空白字符(换行符)显示的，只有在normal、 pre-wrap、 pre-line的时候，后面两个属性才会起作用，默认时normal

所以overflow-wrap: break-word;和 word-break: break-all; 用一个就够了，两者都存在的，后者优先级更高

break-word 尽量不打破单词和数字，

break-all

      <div
        id="box"
        style={{
          width: 100,
          border: 'solid',
          wordBreak: 'break-all',
        }}
      >
        这 是12345111111一个不可思议的长单词
      </div>

image.png

注意“111”被换行了，而相同宽度时 break-word 表现为

除非一行宽度也显示不下"12345111111”，70像素时

延伸

word-break也有break-word，MDN不太推荐的意思

word-wrap 是 overflow-wrap的别名

word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法