Html 如何包装或打断CSS中已包含多个连字符的单词？

我正在寻找一个包含多个连字符的单词，如“面对面”或“全有或全无”。在HTML中，这些类型的单词和表达式似乎不会自然中断

当我尝试不同的组合时，唯一的成功就是使用了break：break all，但它不会在任何连字符上打断单词，并且通常在一行中单独留下一个字母

下面是一个例子：

<style>
.two-hyphens {
width: 10px;
font-size: 40px;
border: 1px solid #000;
}
</style>

<div class="two-hyphens">
Face to face
<br><br>
Face-to-face
</div>

.两个连字符{
宽度：10px；
字体大小：40px；
边框：1px实心#000；
}
面对面



面对面

您是否尝试过使用javascript或jquery？尝试使用replace-to-replace-

我发现，使用display:inline块属性将连字符包装在div中似乎起到了作用

face<div style="display: inline-block;">-</div>to<div style="display: inline-block;">-</div>face<br>

面对面

我仍然想知道是否有更好的方法来做到这一点。

尝试以下方法：

.breakAtHyphen {
  word-break: keep-all;
}

确保将此类分配给包含文本的标记

---

这里有一个资源可以帮助理解

word break

属性：

，因为

word break:keep all

的行为被描述为“[word]break不应用于中文/日文/韩文（CJK）文本。非CJK文本行为与普通文本相同。”我有点惊讶，这解决了这个问题（参考：.@davidsaysrestatemonica基于我在答案中发布的w3schools上的示例，他们提供的示例专门处理连字符中断。然而，非常有趣的是，中断不适用于CJK文本。每天学习一些新的东西！我尝试了

单词中断：保留所有

，但它不起作用。可能还有其他原因更高级别上的er标记可能会产生干扰？我尝试了很多级别，但都没有成功。我发现使用

display:inline block

属性将连字符包装在div中的方法奏效了，并且在任何地方都有效。@johnnyg0如果您将代码发布到文本所在的位置，我可能会提供更多帮助。如果您要发布，请确保同时发布这两个属性HTML和CSS@lime我刚刚添加了一个不起作用的代码示例。我发现了一个我在下面发布的解决方案。它可以工作，但有点笨重。也许你有更好的解决方案？