CSS：连字符：自动对某些单词不起作用

9wbgstp7 于 2023-01-18 发布在其他

关注(0)|答案(2)|浏览(206)

有人能解释一下为什么下面的代码片段不能正确地连字符"Sustainability"吗？我在Google Chrome，FireFox和Safari中测试了这个，它们都没有连字符，但是它们都正确地连字符了。

- 到目前为止我的观察**：

1.如果单词不大写，则开始使用连字符
1.如果我将lang属性从en更改为de（德语），它也会开始工作，尽管该单词是英语单词

:root {
  font-size: 20px;
  font-family: system-ui;
  padding: 2rem;
}
body {
  margin: 0;
}
p {
  border: 1px solid;
  width: 100px;
  hyphens: auto;
}

<html lang="en">
  <body>
    <p>The word Sustainability can't be hyphenated, apparently</p>
    <p>Only if written without a capital "S", it starts working: sustainability 🤔</p>
  </body>
</html>

css

来源：https://stackoverflow.com/questions/75146218/css-hyphens-auto-doesnt-work-for-some-words

2条答案

按热度按时间

toiithl61#

它在规格中定义为：https://www.w3.org/TR/css-text-3/#hyphenation
“UA可以使用语言定制的启发式规则从自动连字符中排除某些单词。例如，UA可以通过排除匹配某些大写和标点模式的单词来尝试避免专有名词中的连字符。此规范不定义此类启发式规则。（注意，此类启发式规则需要随语言而变化：例如，英语和德语的大写惯例就大不相同。）”

赞(0）回复(0）举报 2023-01-18

ycl3bljg2#

由于语言规则的原因，这一定是一个有意的行为。在这一点上，没有太多的连字符控制机制，浏览器可以自由决定当hyphens: auto时如何进行连字符。
作为一种解决方法，您可以使用软换行字符，如U+00AD或&shy HTML实体。

赞(0）回复(0）举报 2023-01-18