如何使导航菜单列表项中的Contact, Phone number保持单行显示？

咱们先定位核心问题：你碰到的是单个导航列表项里的「Contact, Phone number」文本自动折行到下一行的情况，这大概率是因为该列表项的宽度被限制，或者文本默认的换行规则触发了折行。

下面给你几个针对性的修复方案，你可以根据自己的实际场景选择：

方案1：强制文本不折行（最直接） #

给包含文本的<a>标签或者.nav-li添加CSS属性，强制文本保持在同一行：

.nav-li a {
  white-space: nowrap; /* 禁止文本自动折行 */
}

这个方法能确保「Contact, Phone number」始终作为一个整体显示，哪怕容器宽度不够时可能会轻微溢出，完全匹配你让文本保持单行的需求。

方案2：调整导航整体为横向排列（如果是布局需求） #

看你的代码，.nav-li设置了display:block，这会让每个列表项垂直堆叠。如果你的导航本来应该是横向排列的，那可以修改布局：

.nav-links {
  display: flex; /* 让ul变成弹性容器，子元素横向排列 */
  list-style: none; /* 去掉默认的列表圆点 */
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
}

.nav-li {
  display: block;
  padding: 20px 30px;
  /* 可选：加上下面的属性，彻底避免单条文本折行 */
  white-space: nowrap;
}

这样整个导航会横向铺开，每个列表项的文本也能稳定保持在同一行。

方案3：让容器宽度自适应内容 #

如果是因为导航容器宽度太窄导致文本被迫折行，你可以让容器根据内容自动调整宽度：

.nav-links {
  width: fit-content; /* 容器宽度自适应内部内容 */
}

这样容器会跟着里面的菜单内容调整宽度，从根源上避免文本因容器过窄折行。

完整可运行的示例代码 #

<ul class="nav-links">
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Sign up</a>
  </li>
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Home</a>
  </li>
  <li class="nav-li">
    <!-- svelte-ignore a11y-invalid-attribute -->
    <a href="#">Contact, Phone number</a>
  </li>
</ul>

<style>
.nav-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-li {
  display: block;
  padding: 20px 30px;
}

.nav-li a {
  white-space: nowrap;
}
</style>

建议先试试方案1，它最直接解决文本换行的问题；如果是导航布局本身需要调整，再用方案2优化横向排列。

内容的提问来源于stack exchange，提问作者Bilguun Enkhee