文字重叠源于line-height、字体度量与盒模型未对齐；须用无单位line-height（如1.6）、box-sizing: border-box、white-space: nowrap，并逐层检查Computed样式。
文字重叠不是“导航没写好”，而是行高（line-height）、字体度量、盒模型三者没对齐——尤其在中文字体下，line-height设错或缺失时，浏览器会用不兼容的后备字体计算行盒，直接导致多行文本垂直堆叠。
为什么line-height设了还重叠？
常见错误是把 line-height 写成带单位的固定值（如 line-height: 20px），一旦父容器字体变大，子元素继承后行高卡死，文字就挤进同一高度；或者压根没给导航项显式声明 line-height，浏览器回退到 Times New Roman 等西文字体度量，中文 ascent/descent 计算失准。
- 必须用无单位数值：比如
line-height: 1.6，它随font-size缩放，保证比例稳定 - 别在
nav或ul上设line-height，那会污染所有后代元素；应只作用于具体导航项（如a或.nav-item） - 若用了自定义字体（如
font-family: "PingFang SC", "Microsoft YaHei"），务必确认该字体文件未损坏——可临时切回系统默认字体验证是否缓解
padding 和 box-sizing 没配对，高度就不可控
导航项常靠 padding-top/padding-bottom 实现视觉居中，但若忽略 box-sizing，实际高度会超出预期：比如设了 height: 48px + padding: 12px 16px，在默认 box-sizing: content-box 下，总高变成 48px + 24px = 72px，相邻项间距被撑开，而内容区反而只剩 24px 高，两行文字自然重叠。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 强制统一加
box-sizing: border-box到所有导航项（a、button、div.nav-item） - 上下内边距优先用
em单位：如padding: 0.75em 1rem，随字体缩放，避免小字号下 padding 过大、大字号下过小 - 若需精确控制单行高度，用
min-height: calc(1.6em * 1)替代单纯依赖line-height，再配合display: flex; align-items: center垂直居中文字
Flex 导航里文字换行导致错位重叠
当导航项文字过长（比如“关于我们”+“产品中心”+“客户服务”混排），flex: 0 0 auto 虽防压缩，但若没限制宽度或禁止换行，文字仍会在窄屏下折成两行，第二行顶到下一项顶部，形成视觉重叠。
立即学习“前端免费学习笔记（深入）”；
- 加
white-space: nowrap阻止换行，这是横向导航的底线规则 - 搭配
overflow: hidden和text-overflow: ellipsis（需同时设width或max-width）处理超长截断 - 响应式断点处（如
@media (max-width: 768px)）必须关闭white-space: nowrap并切换为竖排，否则手机上会横向溢出或强制缩小字体引发新的重叠
真正难调的不是某一行 CSS，而是字体加载失败时浏览器悄悄降级、line-height 继承链断裂、以及 box-sizing 在不同层级被重置——建议打开开发者工具，在 Elements 面板里逐层检查每个导航项的 Computed 样式，重点盯住 line-height、font-family、box-sizing 和 height 四个字段的实际值。
