移动端导航栏文本溢出问题的解决方法

针对你遇到的折叠屏/小屏幕导航栏文本溢出问题，给你几个简单易上手的解决方案，适合HTML新手：

1. 文本自动截断（最快见效） #

给导航栏的文本元素添加CSS样式，让过长的文本自动显示省略号，不会溢出：

/* 假设你的导航文本类名为nav-text */
.nav-text {
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 末尾显示省略号 */
  max-width: 80px; /* 根据导航栏宽度调整这个值，确保适配小屏幕 */
}

你可以根据实际导航栏的空间，调整max-width的数值，测试时用浏览器F12打开开发者工具，切换到移动端视图模拟折叠屏尺寸。

2. 小屏幕下缩小字体 #

用CSS媒体查询，针对折叠后的小屏幕单独调整字体大小：

/* 匹配折叠屏或宽度小于250px的设备（Galaxy Z Fold3折叠后宽度约226px） */
@media (max-width: 250px) {
  .nav-text {
    font-size: 12px; /* 比默认字体小1-2号 */
    padding: 0 4px; /* 适当缩小内边距，节省空间 */
  }
}

这种方法能保留完整文本，只是缩小显示，适合文本长度不是特别长的情况。

3. 折叠为汉堡菜单（适合多导航项） #

如果导航项较多，小屏幕下直接把导航栏改成汉堡菜单，彻底避免溢出：

HTML结构 #

<nav>
  <!-- 汉堡按钮，小屏幕显示 -->
  <button class="hamburger" id="hamburgerBtn">☰</button>
  <!-- 导航菜单 -->
  <ul class="nav-list" id="navList">
    <li><a href="#" class="nav-text">首页</a></li>
    <li><a href="#" class="nav-text">产品介绍</a></li>
    <li><a href="#" class="nav-text">联系我们</a></li>
  </ul>
</nav>

CSS样式 #

/* 默认显示导航菜单 */
.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-text {
  padding: 0 10px;
}

/* 汉堡按钮默认隐藏 */
.hamburger {
  display: none;
  border: none;
  background: transparent;
  font-size: 18px;
}

/* 小屏幕下切换显示 */
@media (max-width: 250px) {
  .nav-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 40px;
    left: 0;
    background: #fff;
    width: 100%;
    padding: 10px 0;
  }
  
  .hamburger {
    display: block;
  }
  
  .nav-list li {
    padding: 8px 15px;
  }
}

简单JS交互（切换菜单显示） #

// 给汉堡按钮加点击事件
document.getElementById('hamburgerBtn').addEventListener('click', function() {
  const navList = document.getElementById('navList');
  navList.style.display = navList.style.display === 'none' ? 'flex' : 'none';
});

新手提示 #

• 优先尝试第一种方法，代码最少，见效最快；
• 测试时用浏览器开发者工具的「设备模拟」功能，选择Galaxy Z Fold3的折叠/展开状态；
• 确保导航栏容器本身没有设置固定宽度，尽量用width: 100%自适应父容器宽度。

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