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

Question

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

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

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 只发生在单词后不能中断的菜单项上？

Answer 1

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

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

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

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