Html CSS:连字符：如果无法换行，则自动

在下拉菜单中，我有两种不同的情况：

一个菜单项有多个单词，一个单词后应该断开。 另一个菜单项有一个长单词，应该用自动连字符分隔

white-space: pre-line;
word-wrap: break-word;

结果:

This item breaks
like it should

ThisItemDoesNotBre
akLikeItShould

这将按应有方式断开多个单词项，并断开菜单项末尾的一个单词项。添加

hyphens:auto

使“一个单词”项看起来很棒，但“多个单词”项也会在一个单词中打断，而不是像前面一样在单词的末尾：

This item doesn't bre-
ak like it should

ThisItemDoesBreak-
LikeItShould

---

是否可以只对那些不能在单词后打断的菜单项使用连字符：auto？

您使用的CSS规则根据单词的长度而不是根据一个长单词中的“单词”来打断单词

只有当浏览器知道您使用的是哪种语言并且有一本词典可用时，它才会知道在正确的位置打断单词

断字规则是特定于语言的。在HTML中，语言由lang属性决定，只有当该属性存在并且有合适的断字字典可用时，浏览器才会断字。在XML上，必须使用XML:lang属性。

---

如果每个单词都以大写字母开头，您可以尝试使用Javascript/JQuery分隔长单词。

我试图避免使用Javascript来完成该任务，但它似乎不像我想象的那么简单。谢谢您是否尝试添加语言属性<代码>