Chrome下单个字符包裹span加::after时单词异常折断如何解决

问题根因 #

Chrome的文本换行算法会将包含position: absolute伪元素的行内<span>识别为合法的换行分隔点，由于你将单个字符分别用<span>包裹，Chrome无法识别完整的单词边界，就会出现单词从任意字符位置折断的问题，这是Chrome和其他浏览器布局逻辑的差异导致的。

解决方案 #

方案1：重置伪元素排版属性（改动最小）

直接给::after伪元素添加零尺寸排版属性，让Chrome的换行算法忽略伪元素的影响，不需要修改其他逻辑：

.c::after {
  position: absolute;
  content: '';
  /* 新增以下4行属性即可 */
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

该方案几乎不改动原有代码，实测Chrome 93+版本即可对齐Firefox、Safari的换行效果，单词不会被中间折断。

方案2：通过断行规则限制换行位置（兼容性更广）

如果方案1不符合你的伪元素使用场景，可以调整字符span的展示类型配合换行规则实现：

.c {
  position: relative;
  /* 将字符span设为行内块，避免被拆分 */
  display: inline-block;
}
p {
  max-width: 50ch;
  border: 1px solid black;
  /* 仅允许在空格处换行，不拆分单词 */
  word-break: keep-all;
  overflow-wrap: normal;
}

以上两种方案均不需要为单个单词额外包裹设置nowrap的<span>标签，也可以完整保留::after伪元素的逻辑。

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