Hey there! 作为前端新手搞作品集还坚持Mobile-first和Flexbox，这点真的超棒👍 针对你遇到的移动端导航按钮文本换行重叠的问题，我给你几个实用的解决思路，都是贴合你当前技术栈来的：

1. 先给按钮本身加「呼吸空间」，避免文本挤在一起 #

首先从按钮的基础样式入手，确保文本有足够空间展示，同时控制换行行为：

.nav-btn {
  /* 用Flex让按钮内部文本居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 给按钮上下左右加内边距，避免文本贴边 */
  padding: 0.6rem 1.2rem;
  /* 允许文本在空格处换行，避免单词被强行拆分 */
  white-space: pre-wrap;
  word-wrap: break-word;
  /* 设置合适的行高，彻底解决上下行文本重叠 */
  line-height: 1.5;
  /* 禁止文本被截断，确保内容完整显示 */
  overflow: visible;
  /* 给按钮设置最小宽度，防止被挤压到过窄 */
  min-width: 75px;
}

这里的line-height是核心——只要行高大于字体大小，上下行文本就不会重叠；padding则给文本留出了足够的「呼吸空间」，不会显得拥挤。

2. 优化导航容器的Flex布局，让按钮整齐排列 #

你的导航栏本身应该是一个Flex容器，调整它的属性可以让按钮在必要时整齐换行，而不是单个按钮被拆得七零八落：

.nav-container {
  display: flex;
  flex-wrap: wrap; /* 允许按钮在空间不足时换行 */
  gap: 0.8rem; /* 按钮之间的间距，比margin更省心 */
  justify-content: center; /* 让按钮在容器中居中排列 */
  padding: 0.5rem 1rem;
}

.nav-btn {
  flex: 0 1 auto; /* 按钮可以缩小，但不会小于自身内容宽度 */
  /* 如果想让移动端每行固定显示2个按钮，可以用这个： */
  /* flex-basis: calc(50% - 0.8rem); */
}

用gap属性可以轻松给按钮之间加均匀的间距，避免挤在一起；如果想让按钮在移动端保持整齐的两行排列，就用flex-basis结合calc计算宽度，这样每个按钮的宽度一致，换行也会很规整。

3. 针对长文本按钮的特殊处理 #

如果像「About Me」这种文本还是出现奇怪的换行，可以试试这两个小技巧：

• 手动控制换行（适合固定文本）：

  <button class="nav-btn">About<br>Me</button>
  

• 用媒体查询在极小屏幕下缩小字体：

  @media (max-width: 320px) {
    .nav-btn {
      font-size: 0.9rem;
    }
  }
  

这样在特别小的屏幕上，文本会自动缩小，更不容易出现换行问题。

先从调整按钮的内边距和行高开始试，再优化导航容器的Flex布局，基本就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者Virginia Balseiro