如何让HTML/CSS按前缀和后缀而非单个字母实现word-break断词？

可以通过以下几种更可靠的方式实现按指定前缀/后缀拆分单词换行，同时避免你当前方法的缺陷：

• 使用<wbr>标签：这是HTML原生的单词换行机会标签，不会在文本中添加空格或连字符，仅告诉浏览器此处可以换行。例如：

  <p>super<wbr>califragilisticexpialidocious</p>
  

  浏览器会在需要时在<wbr>位置换行，视觉上单词仍保持连贯，且屏幕阅读器会将其识别为单个完整单词，无障碍友好。

• 使用软连字符­：如果希望换行时显示连字符，可插入软连字符。未换行时该字符不可见，换行时会显示为连字符：

  <p>super&shy;califragilisticexpialidocious</p>
  

  同样，屏幕阅读器会将其识别为单个单词，不会影响无障碍访问。

关于你使用word-spacing: -#px方法的问题 #

这个方法存在两个关键缺陷：

1. 适配成本高：非等宽字体下，不同字符的宽度不一致，手动计算负间距值非常繁琐，且在不同设备、字体大小下容易出现错位。
2. 无障碍风险：从HTML结构上看，你是把一个单词拆成了两个独立的文本片段，即使视觉上通过负间距连在一起，屏幕阅读器几乎都会将它们识别为两个独立单词，这会给视障用户带来理解障碍，严重违反无障碍设计原则，不建议使用。

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