如何用CSS实现垂直菜单ul li多单词文本自动换行成两行？

嘿，我来帮你搞定这个菜单文本换行的需求！不用手动加<br>标签，纯CSS就能实现你要的效果，下面给你几种实用的方案，你可以根据自己的场景选：

方案1：利用单词间距强制换行（无需固定宽度） #

如果不想限制菜单的宽度，不管菜单有多宽，都要把li里的多个单词拆成每行一个，这个方法超好用：

/* 替换成你实际的菜单li选择器 */
.vertical-menu li {
  word-spacing: 100vw; /* 用足够大的间距把第二个单词挤到下一行 */
  text-align: center; /* 可选，让文本居中更美观 */
}

原理是把单词之间的间距设为视口宽度，这样第二个单词根本放不下，只能自动换行到下一行，完美保持单词的完整性。

方案2：固定宽度强制换行（适合菜单宽度固定的场景） #

如果你的菜单宽度是固定的，直接给li设置一个刚好容不下两个单词的宽度，文本就会自动换行：

.vertical-menu li {
  width: 80px; /* 调整这个值，直到第二个单词刚好换行 */
  white-space: normal; /* 确保文本允许换行，如果菜单默认是nowrap的话必须加 */
  text-align: center; /* 可选，居中对齐 */
}

这个方法的好处是可以精准控制换行的时机，适合布局固定的菜单。

方案3：Flex布局（需轻微调整HTML，灵活性最高） #

如果可以稍微改一下HTML结构，把每个单词用<span>包起来，用Flex垂直排列的方法最稳妥，还能单独控制每个单词的样式：

HTML调整： #

<li><span>Primeiro</span> <span>Item</span></li>
<li><span>Segundo</span> <span>Item</span></li>

CSS： #

.vertical-menu li {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让单词居中对齐 */
}
/* 可选：给单词之间加一点间距 */
.vertical-menu li span {
  margin: 2px 0;
}

这个方法的优势是不管单词数量多少，都能轻松每行一个，还能灵活调整间距和对齐方式。

你可以根据自己的实际情况选其中一种，测试一下哪个最适合你的菜单样式~

内容的提问来源于stack exchange，提问作者Lucas Catani