菜单中有多个单词时换行

Line break when you have more than one word in the menu

当 "ul li" 项中有多个单词时,我需要将垂直菜单中的文本分成两行。

换句话说,我需要在元素 "li" 中的两个单词之间有一个标记 "br",但带有 css.

下面的图片让事情更清楚。

我有这个 IMAGE

我需要这个 IMAGE

Edit1:实时站点:http://www.l9web.com.br/sites/test

您可以尝试使用字间距。

尝试

ul li {
    word-spacing: 'parent-width'; // Percentages will not work 
}

其中'parent width'是父元素的宽度。也许在无序列表的情况下?那应该给你每行一个词。祝你好运!

我创建了一支工作笔:https://codepen.io/anon/pen/XYWBWW

如果您只想每行一个单词 - 将单词间距值设置为大于父容器的宽度。任何值都可以:

ul li {
  word-spacing: 9999px; // very high value to force one word per line
}

我找到了解决方案。

在 "ul li" 我们必须设置:

white-space: pre-wap

感谢大家