CSS连字符没有出现在Firefox 52中的一个包装词中

Question

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

我可以确认我在 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 中，“承诺”一词用连字符分成两行“承诺”。 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）：