CSS hyphens:auto属性部分文本断行缺失连字符是什么原因

• 第一个容器内文本断行不显示连字符，是语言属性不匹配导致的：hyphens: auto的自动断词、加连字符逻辑，完全依赖浏览器内置的、与页面lang属性对应的语言断词规则库。你当前页面设置的是lang="en"（英语），但容器内的Rozplombovani、dlazdice是捷克语词汇，不在英语断词词典的识别范围内，浏览器无法判断正确的音节断开位置，自然不会插入连字符。如果需要让这两个词正常显示连字符，需要将页面语言属性改为捷克语对应的lang="cs"，同时确认所用浏览器预装了捷克语断词词典。
• 第二个容器内长随机字符串部分断行无连字符，是CSS属性逻辑冲突导致的：你同时给容器设置了overflow-wrap: break-word，这个属性的作用是当字符串长度超出容器宽度、且不存在合法断词位置时，强制在任意字符位置截断换行。这种强制截断不属于hyphens规则判定的合法音节断位，浏览器不会在这类截断位置插入连字符。你看到的3处带连字符的断行，是浏览器按照英语拼写规则，从这串无意义字符中匹配出的符合英语断词规则的音节位；剩余1处断行位置没有符合英语断词规则的可断点，被overflow-wrap: break-word强制切断，因此不会显示连字符。

补充说明：hyphens: auto的实际表现存在环境差异，部分精简版操作系统、移动端WebView可能缺少小语种的断词词典，即便lang属性设置正确，也可能出现连字符不显示的情况。

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