hyphens: manual 仅响应软连字符(\u00ad),不自动断字、不依赖lang、不受white-space影响;必须手动插入,且须位于单词内部才生效。

必须手动插入 或 Unicode \u00AD,否则 hyphens: manual 完全不生效——它不会自动识别音节、也不看空格或标点。
hyphens: manual 只响应软连字符()
这个值本质是“被动监听”:浏览器只检查文本中是否出现了软连字符(),有就断,没有就死守整词。它和 word-break 或 overflow-wrap 完全无关,也不受 white-space 影响(除非设成 nowrap,那连换行都禁了)。
-
是不可见的,仅在换行时才渲染为- - 不能用普通短横线
-、en dash–或 em dash—替代 - HTML 中推荐写成实体
,比直接粘贴 Unicode 字符更稳定 - JS 动态插入时用
\u00AD,例如:str.replace(/([aeiou])/g, '$1\u00AD')
lang 属性不是可选的,而是 hyphens: auto 的前提,对 manual 却无影响
hyphens: manual 不依赖语言字典,所以 lang 属性在这里纯属冗余。但如果你混用 auto 和 manual,或者未来要切换模式,建议统一加上——避免漏掉后被 auto 模式误伤。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 没加
lang时,hyphens: auto在多数浏览器里直接退化为none -
lang="en"和lang="de"触发的是不同断字规则,但manual对两者一视同仁 - 移动端 iOS Safari 对
hyphens支持较弱,即使写了也可能忽略,需实测
常见失效场景与验证方式
最常遇到的不是“没效果”,而是“以为没效果”——因为软连字符太隐蔽,肉眼根本看不见。建议用开发者工具选中元素,右键「Edit as HTML」直接查源码里有没有 。
- 复制粘贴文本时,
极易丢失(尤其从 Word 或 PDF 复制) - 服务端模板(如 Jinja、ERB)若未开启 HTML 转义,
可能被当成普通字符串输出,没解析成字符 - 检查 computed styles:如果看到
hyphens: manual但没断开,99% 是缺失或位置不对 - 快速验证法:给一个长单词中间硬插
,比如antidisestablishmentarianism→antidisestablishmentarianism
真正容易被忽略的是:软连字符必须落在单词内部,不能紧挨空格、标点或换行符;否则浏览器会跳过它——这和人的直觉相反,得靠反复试错定位。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










