<li>上加overflow: hidden无效，因其默认为display: list-item，非块级元素，不创建BFC、不响应宽度约束；须包裹<div>并设display: block、white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度。
直接给 <ol> 或 <li> 设 overflow: hidden 没用——它不创建块级格式化上下文，也不响应 width 和 text-overflow，纯靠父容器约束。
为什么 <li> 上加 overflow 无效？
因为 <li> 默认是 display: list-item，不是块级元素，浏览器不会把它当作独立的溢出容器处理。你写 li { overflow: hidden; white-space: nowrap; }，文本照样撑破、换行失效、省略号不出现——这不是 CSS 写错了，是 display 类型根本不支持。
常见错误现象：
- 长 URL 或代码片段让整列变宽，破坏 flex 布局或表格对齐
- 在
flex容器中，<li>不收缩，把旁边按钮/图标挤出视口 - 用
text-overflow: ellipsis却始终显示完整文本，控制台也无报错
真正起效的截断方案：必须包裹 + 显式块级化
和 <td> 一样，<li> 里的内容得套一层 <div> 或 <span>，再施加完整约束。这是目前唯一跨浏览器稳定的路径。
立即学习“前端免费学习笔记（深入）”；
关键三件套（缺一不可）：
- 外层
<li>或其父容器需有明确宽度限制（width/max-width/flex-basis） - 内层容器设
display: block（或inline-block） - 内层容器同时设
white-space: nowrap+overflow: hidden+text-overflow: ellipsis
示例：
<ol style="max-width: 300px;"> <li><div style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">https://api.example.com/v2/data/records/abc123def456</div></li> </ol>
长单词/无空格文本该用 overflow-wrap 还是 ellipsis？
二者逻辑冲突，不能共存。选哪个取决于业务需求：
- 要保留可读性（如路径、URL），优先用
overflow-wrap: break-word，配合max-width—— 它会在斜杠、点号等符号后折行，不破坏语义 - 要严格控宽且允许信息损失（如 ID 列、哈希值），才用
text-overflow: ellipsis方案 - 别用
word-break: break-all，它会把useCallback断成useC+allB+ack，调试时抓狂
注意：overflow-wrap 可直接加在 <li> 上，但必须配 max-width，否则无效。
整组列表横向溢出？别压单个 <li>，改包外层
当 <ol> 包含大量窄列项（比如带图标、状态标签的清单），总宽度远超容器时，强行压缩每个 <li> 会导致文字糊成一团。更合理的是让整个列表可横向滚动：
- 给
<ol>父容器（如<div>）设overflow-x: auto和white-space: nowrap -
<ol>自身设display: inline-flex或display: inline-block，避免换行 - 去掉
<ol>默认的list-style-position: outside（会额外占空间），改用list-style-position: inside或自定义序号
这个方案在移动端尤其重要——用户习惯左右滑动看长清单，比缩放或点击展开更直接。
最常被忽略的一点：所有这些方案都依赖「宽度约束从上往下传递」。如果父容器是 flex: 1 但没设 min-width，或者用了 width: fit-content，内层的 max-width 和 ellipsis 就全失效。动手前先用 outline: 1px solid red 检查真实渲染宽度。
