如何避免CSS自动换行时超长无空格字符串前出现多余换行？

问题根因 #

你当前使用的overflow-wrap:break-word+word-break:break-word样式组合，会触发浏览器默认的排版逻辑：排版时会先判断当前行剩余宽度能不能放下整个span内的长无空格字符串，如果放不下，会先把整段长串移动到新行，再在新行内做折行处理，这就是你看到的长串前自动开启新行的原因。

解决方案 #

根据你的场景（长无空格串可在任意位置断行），直接替换span的样式即可：

方案1：兼容性最优 #

span {
  word-break: break-all;
}

这个方案支持所有主流浏览器，包括低版本IE，会直接在当前行剩余宽度用尽的位置折断长串，不会提前把整串移到新行，完全匹配你的需求。

方案2：兼顾正常文本排版 #

如果你的页面中同时存在正常有意义的英文单词，不希望单词被随意折断，可以使用：

span {
  overflow-wrap: anywhere;
}

这个方案仅针对超长无空格串做任意位置折行，不会切断正常英文单词，兼容性适合仅需要适配现代浏览器的场景。

内容的提问来源于stack exchange，提问作者GFL