菜单中有多个单词时换行
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
感谢大家
当 "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
感谢大家