CSS hyphens属性对URL格式字符串无法正常断字的问题咨询

问题根因 #

hyphens: auto的断字逻辑完全依赖浏览器内置的对应语言词典，仅会对符合自然语言拼写规则的单词自动识别断字点。你示例中的路径前缀/people/type:astronauts/name-包含大量非英文单词的特殊字符（/、:），浏览器词典中没有对应断字规则，就会将这部分识别为不可拆分的连续长单词，只有后续符合英文拼写的gregory-chamitoff等内容可以正常触发断字。
另外使用hyphens: auto必须给页面/元素声明对应lang属性（如<html lang="en">），否则多数浏览器会直接禁用自动断字功能，这也是常见的踩坑点。
你之前用到的word-break: break-all/overflow-wrap: break-word会直接跳过hyphens的断字逻辑，强制拆分所有超长字符串，所以无法保留hyphens的断字效果。

适配方案（保留hyphens优先断字） #

方案1：用overflow-wrap: anywhere做兜底 #

这个属性的断行优先级低于hyphens，会先尝试用hyphens规则断字，仅当遇到完全没有断字点的长串时才强制折行，完全不会抵消hyphens的作用，适合绝大多数场景：

.test {
  font-size: 20px;
  width: 210px;
  hyphens: auto;
  overflow-wrap: anywhere; /* 仅hyphens断不开时才强制折行 */
  overflow: hidden;
  background-color: white;
}

方案2：预处理特殊字符串插入可断行标记 #

如果经常需要展示路径、ID、代码这类非自然语言串，可以预处理字符串在特殊字符后插入<wbr>（软换行标记），浏览器会优先在这些位置断行，既符合内容阅读习惯，也不影响普通文本的hyphens断字：

// 路径字符串预处理函数
const addWrapMark = (str) => {
  // 在/ : - 等特殊字符后插入软换行标记
  return str.replace(/([/:_\-])/g, '$1<wbr>')
}

// 渲染时调用
document.querySelector('.test').innerHTML = addWrapMark('/people/type:astronauts/name-gregory-chamitoff/profile')

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