html - 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

是否可以使 hyphens:auto 仅发生在那些在单词后不能中断的菜单项上？

Answer 1

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

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

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. On XML, the xml:lang attribute must be used. Source

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