是否可以防止 CSS 中带连字符的单词之间换行？

Question

虽然 CSS word-break 可以更好地控制长词的显示，但是否可以通过保留带连字符的词而不被强行分成 2 个单独的行来实现相反的效果？

CodePen Demo 以更好地说明场景。

Answer 1

您尝试使用 "non-breaking hyphen" 了吗？不需要 CSS。这是一个普通的 html 实体。

试试这个‑

这是一个例子

Sample‑text

Answer 2

总结 您的问题是，您正在尝试撤消 word-break 但想用连字符代替它。以下应该有所帮助

如果这不是您想要的，我很抱歉它是这样读给我的。

试试这个

.myClass{
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

注意，如果单词中有连字符，无论如何它都会回车 return 它

为了避免回车return一个带连字符的词，并强制它是一个词，那么它会通过javascript，你需要将“-”的文本更改为一个 HTML 实体，这是另一个人的建议