CSS 连字符不会出现在 Firefox 52 中的换行词中

Question

我浏览了几个问题和论坛，但一直找不到答案。我看到了，但它的解决方案对我不起作用。

我可以确认我在 windows 和 mac Firefox 上都遇到了这个问题。

div {
  width: 200px;
  padding: 0 15px;
  margin: 0 auto;
}
p {
  font-size: 16px;
  -ms-word-break: break-all;
  word-break: break-all;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

<div>
  <p lang="en">Better Life Expands Commitment to the Environment
</div>

对我来说，Chrome 是用连字符将 "Commitment" 这个词分成两行 "Commit-ment"。 Firefox 它将单词切成 "Commitme" 和 "nt"，但无法输入连字符。

我尝试了所有小写字母、各种大小、插入  和使用手册，但似乎没有任何效果。我是否遗漏了一些可以找到解决方案的东西？

Answer 1

只需删除 word-break: break-all; - 在 Firefox 中有效：

div {
  width: 200px;
  padding: 0 15px;
  margin: 0 auto;
}

p {
  font-size: 16px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

<div>
  <p lang="en">Better Life Expands Commitment to the Environment
</div>

这是结果的屏幕截图（Firefox Mac）：

CSS 连字符不会出现在 Firefox 52 中的换行词中

CSS hyphens not appearing in a wrapped word in Firefox 52

css

firefox

hyphen