React移动端Header中Link换行问题：如何改为单行显示？

当然可以搞定这个问题！移动端导航换行的核心原因是可用宽度不足以容纳所有链接，结合你现有的Flex布局，我们可以通过调整CSS让链接始终保持在一行，同时保证移动端的可用性。

方案一：横向滚动导航（推荐） #

这是移动端导航最常用的解决方案，既保留所有链接的可见性，又不会挤压内容。修改你的CSS如下：

header {
  background: rgb(73, 176, 236);
  display: flex;
  align-items: center;
  /* 允许header横向滚动 */
  overflow-x: auto;
  /* 隐藏默认滚动条（提升视觉体验） */
  scrollbar-width: none;
}

/* 针对WebKit浏览器（如Chrome、Safari）隐藏滚动条 */
header::-webkit-scrollbar {
  display: none;
}

header div {
  display: flex;
  /* 链接之间的间距，可根据需求调整 */
  gap: 1.5rem;
  /* 强制内容不换行 */
  white-space: nowrap;
}

.navbar-brand {
  /* 确保单个链接内的文字不会换行 */
  white-space: nowrap;
  /* 可选：给链接添加内边距，提升点击区域 */
  padding: 0.5rem 0;
}

原理说明 #

1. 给header内的div设置display: flex，让所有Link元素在同一行排列；
2. overflow-x: auto让header在内容超出屏幕宽度时，支持横向滚动；
3. white-space: nowrap确保链接文字和容器内的元素不会自动换行；
4. 隐藏滚动条是为了让导航栏看起来更简洁，用户依然可以通过滑动操作查看所有链接。

方案二：压缩链接适应宽度（不推荐） #

如果你不想用滚动，也可以让链接自动缩小来适应宽度，但可能会导致文字挤压，体验较差：

header div {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.navbar-brand {
  flex-shrink: 1;
  /* 可选：限制最小宽度，避免过度压缩 */
  min-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这种方式会让链接文字超出部分显示省略号，适合链接文字较短的场景，但不如滚动方案灵活。

内容的提问来源于stack exchange，提问作者4est