移动端文本溢出及导航重叠问题求助（附HTML/CSS代码）

核心问题拆解 #

• 文本溢出页面：未针对小屏设备设置响应式文本尺寸，固定字体大小导致超出容器宽度
• 导航展开后重叠失效：导航栏层级不足或布局定位错误，导致被页面内容遮挡，无法触发交互

针对性解决方案 #

1. 实现小屏文本自适应（≤500px） #

使用CSS clamp() 函数结合相对单位，让文本在小屏自动缩放，同时限制最小/最大字号避免可读性问题：

/* 全局文本容器或特定文本元素 */
.content-text {
  /* 默认桌面端字号 */
  font-size: 1.2rem;
}

@media (max-width: 500px) {
  .content-text {
    /* clamp(最小字号, 动态计算值, 最大字号) */
    font-size: clamp(0.9rem, 2.8vw, 1.1rem);
    /* 可选：添加换行控制，避免长单词溢出 */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

如果需要兼容旧浏览器，也可以用媒体查询结合vw单位：

@media (max-width: 500px) {
  .content-text {
    font-size: 2.8vw;
    min-font-size: 0.9rem;
    max-font-size: 1.1rem;
  }
}

2. 修复导航栏重叠与交互失效 #

通过调整定位、层级和内容偏移，确保导航展开后可正常交互：

/* 基础导航样式 */
.navbar {
  position: relative;
  background: #fff;
  padding: 1rem;
}

/* 展开按钮 */
.nav-toggle {
  display: none; /* 桌面端隐藏 */
}

@media (max-width: 500px) {
  .nav-toggle {
    display: block;
    cursor: pointer;
  }

  /* 折叠状态的导航菜单 */
  .nav-menu {
    display: none;
    position: fixed; /* 固定定位确保覆盖内容 */
    top: 4rem; /* 与导航栏顶部保持距离 */
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999; /* 层级高于页面内容 */
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  /* 展开状态的导航菜单 */
  .nav-menu.active {
    display: block;
  }

  /* 内容区域添加顶部内边距，避免被固定导航遮挡 */
  .page-content {
    padding-top: 5rem;
  }
}

对应的HTML结构示例：

<nav class="navbar">
  <button class="nav-toggle" id="navToggle">☰</button>
  <div class="nav-menu" id="navMenu">
    <a href="#">首页</a>
    <a href="#">关于</a>
    <a href="#">联系</a>
  </div>
</nav>

<div class="page-content">
  <p class="content-text">这里是页面的长文本内容，在小屏设备下会自动调整字号，避免溢出页面...</p>
</div>

<script>
  // 导航展开/折叠逻辑
  const toggleBtn = document.getElementById('navToggle');
  const navMenu = document.getElementById('navMenu');
  toggleBtn.addEventListener('click', () => {
    navMenu.classList.toggle('active');
  });
</script>

全设备适配验证要点 #

• 调整浏览器窗口宽度至500px以下，检查文本是否自动缩放、无溢出
• 点击导航展开按钮，确认菜单正常显示且可点击，无内容重叠
• 测试真实移动设备（或浏览器开发者工具的移动模拟），验证交互与布局稳定性

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