设置hyphens属性后换行为何未自动添加连字符？
2026-7-10
实现英文单词换行自动加连字符的解决办法
你遇到的问题核心是没指定正确的语言属性——hyphens: auto的连字符规则是和语言绑定的，浏览器需要知道用哪种语言的拆分逻辑才能正确添加连字符。
具体修正步骤：
- 给目标容器或者全局
<html>标签加上lang="en"属性，明确告诉浏览器这是英文文本。 - 保留
hyphens: auto，如果不需要强行截断超长无空格单词，可以去掉word-wrap: break-word（它会绕过音节拆分直接截断，和hyphens的作用冲突）；要是需要兼容极端长文本场景，换成标准的overflow-wrap: break-word。
可直接用的代码示例：
<!-- 局部设置语言 --> <div style="width: 80px; hyphens: auto;" lang="en">International</div> <!-- 全局设置语言（更推荐，全站英文文本都能生效） --> <html lang="en"> <body> <div style="width: 80px; hyphens: auto;">International</div> </body> </html>
额外说明：
hyphenate-character: "-"是默认值，完全没必要额外设置，除非你想替换成其他连字符样式（比如软连字符‑）。- 浏览器兼容：Chrome、Firefox、Edge、Safari现在都支持
hyphens: auto，仅旧版Safari可能需要加-webkit-hyphens: auto前缀兜底。
内容的提问来源于stack exchange，提问作者Pascal Wagner
相关产品推荐
相关产品推荐
