文本自动换行无连字符显示及多语言断字设置技术咨询

核心问题分析与修复步骤 #

• 为什么没有连字符？
  你用了word-break: break-all，这个属性会强制在任意字符位置截断单词，完全跳过浏览器的自然断字逻辑，导致hyphens: auto直接失效——把这个属性删掉就行。

• 如何指定文本语言？
  直接给对应的<li>标签加上lang属性，明确告知浏览器文本的语言类型，让它能加载对应语言的断字规则（虽然不是所有浏览器都完美支持，但能最大化触发效果）。

修改后的完整代码 #

HTML部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  
  <ol class="meaning">
    <li class="meaning-item">This is the example of the sentence where the long words should be hyphenated
      <ul class="sentences">
        <li class="sentence" lang="en">This is the example of the sentence where the long words should be hyphenated</li>
        <li class="translation" lang="de">Dies ist ein Beispiel für einen Satz, bei dem lange Wörter getrennt werden sollten</li>
      </ul>
    </li>
  </ol>
  
</body>
</html>

（注：我把德文文本替换成了真实的长句，方便测试断字效果，你可以换回自己的内容）

CSS部分

.meaning {
  list-style-type: none;
  counter-reset: item;
  font-size: calc(0.7em + 2.5vw);
  /* 移除破坏断字逻辑的word-break属性 */
  hyphens: auto;
}

.meaning > li {
  position: relative;
}

.meaning > li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  top: 0;
  text-align: center;
  margin-left: calc(-0.7em - 2.5vw);
}

.sentences {
  list-style-type: none;
  padding-left: 0;
}

额外说明 #

• 现代主流浏览器（Chrome、Firefox、Safari 10+、Edge）都支持hyphens: auto，但要注意：
  • 必须搭配正确的lang属性，浏览器才会调用对应语言的断字字典
  • 只有长单词才容易触发自动断字，短单词不会被强制截断
  • 部分老版本浏览器可能需要前缀（比如老Safari用-webkit-hyphens: auto），但目前主流环境已无需额外配置

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