论前端的强制换行

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

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

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

不查不知道,一查吓一跳!

因为white-space 是控制空白字符(换行符)现实的,只有在normalpre-wrappre-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-wrapoverflow-wrap的别名

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