横向导航中li文本溢出不显示省略号，根本原因是父容器缺乏明确宽度约束，且li需设white-space: nowrap、overflow: hidden、text-overflow: ellipsis、width: 100%及min-width: 0。
横向导航中 li 文本溢出不显示省略号？先看容器宽度是否明确
横向导航（比如 ul + li + display: flex 或 inline-block）里文本被截断却不显示省略号，最常见原因是：父容器没给子项施加有效的宽度约束。即使你写了 text-overflow: ellipsis，它也不会生效——因为浏览器根本不知道“超出谁的边界”。
尤其在 Flex 布局中，li 默认有 min-width: auto，会撑开自身去容纳全部文本，overflow: hidden 就形同虚设。
- 确保导航项的直接父容器（如
ul或包裹li的div）有明确宽度，比如width: 100%、max-width: 800px，或通过 Flex 分配后能推导出确定尺寸 - 对每个
li（或其内部的a标签），必须同时设置：white-space: nowrapoverflow: hiddentext-overflow: ellipsis-
width: 100%或max-width: 100%（关键！否则 Flex 项不收缩） -
min-width: 0（配合width: 100%，解除min-width: auto的锁定）
display: inline-block 导航下省略号失效？检查 white-space 和父级换行控制
用 inline-block 实现横向导航时，li 容易因父容器默认的 white-space: normal 产生看不见的空白符（空格、换行），导致实际可用宽度小于预期，text-overflow 就容易错位或不触发。
- 给导航容器（如
ul）加上font-size: 0，再给li或a单独设回字体大小，消除空白符占位 - 或者更稳妥地：把
ul设为display: flex，彻底规避inline-block的空白问题 -
li内部的链接（a）必须是块级元素（display: block），否则text-overflow在部分浏览器中不作用于内联元素
移动端横向导航出现滚动条而不是省略号？警惕 overflow-x 误用
有人试图用 overflow-x: hidden 直接加在导航容器上，结果发现整个导航不可横向滚动，但文本还是不省略——这是因为 text-overflow 只响应块级容器的**内容溢出**，不是容器自身的溢出。加 overflow-x 对 text-overflow: ellipsis 没有任何帮助，反而可能掩盖真实问题。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 不要对导航容器设
overflow-x: hidden来“强行隐藏”，这会破坏可访问性（键盘用户无法 tab 到被裁掉的项） - 真正要控制的是每个导航项内部的溢出行为，即上文说的
overflow: hidden+text-overflow: ellipsis组合 - 如果导航项本身需要支持点击区域足够大，建议把省略逻辑放在
a标签上，而不是li，避免 padding 影响宽度计算
下拉菜单中的 option 能不能加省略号？基本不能依赖
如果你的横向导航带下拉（select），想让 option 文本过长时显示省略号，得立刻放弃这个念头——原生 select 的弹出菜单由操作系统绘制，CSS 支持极弱。
-
text-overflow: ellipsis在 Chrome/Firefox 桌面端对option有极其有限的支持，但必须满足：display: block+ 明确width+white-space: nowrap+overflow: hidden - iOS Safari、旧版 Edge 完全无视，且没有 fallback 行为
- 真正可控的方案是放弃
select，用div+button+ul自定义下拉，这样每个选项都能自由应用省略样式
最常被忽略的一点：省略号只对单行有效；多行导航项（比如带图标的文字+副标题）没法用 -webkit-line-clamp 安全降级——那个属性只在 WebKit 内核稳定，Firefox 不支持，服务端渲染时还可能触发 SSR 不一致。真要多行截断，得用 JS 测量 + 截字符串，或者接受视觉妥协。
