text-overflow: ellipsis在ol的li中无效，是因为li默认无固定宽度且文本可换行，必须用span包裹文字并设置display: inline-block、max-width、white-space: nowrap、overflow: hidden和text-overflow: ellipsis；flex或表格中还需加min-width: 0或table-layout: fixed。
ol列表项直接加text-overflow: ellipsis为什么无效
因为ol和li默认是块级元素，但li里的文本内容天然可换行、无固定宽度约束，text-overflow: ellipsis根本没机会触发——它只在“文本被真实截断”时才显示省略号，而默认li会不断撑宽容器。
常见错误现象包括：加了white-space: nowrap后整行跑出视口、overflow: hidden完全没反应、序号和文字一起被裁掉甚至消失。
-
ol本身不参与文本渲染，真正要设样式的是li或其内部包裹的元素（比如span） -
li默认没有width或max-width，必须显式设置，否则text-overflow形同虚设 - 序号（1.、2.）由
list-style生成，属于伪元素，不受white-space控制；强行对li设white-space: nowrap会导致序号和文字挤在同一行，视觉错乱
正确做法：用span包裹文字再设省略
把可截断的文本内容用span包起来，让序号和内容解耦。这样既能保留ol的语义与自动编号，又能让省略逻辑只作用于纯文本部分。
示例代码：
<ol>
<li><span class="truncate">这是一段特别长的文字，超出了容器宽度应该显示省略号</span></li>
<li><span class="truncate">另一条超长描述，用于测试多行列表项的截断效果</span></li>
</ol><p><style>
ol {
width: 300px;
}
li {
/<em> 序号保持正常，不限制换行 /
}
.truncate {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style></p>
-
display: inline-block确保span能响应max-width和overflow - 不要对
li设white-space: nowrap，否则序号「1.」会被拉到文字末尾 -
max-width: 100%继承自li的可用宽度，比写死像素更适应响应式场景
Flex布局下ol/li的省略失效怎么办
如果ol或其父容器用了display: flex，li作为flex item会默认flex-shrink: 1，主动压缩自身宽度——结果就是文字根本没溢出，text-overflow永远不会亮。
解决方案只有两个，任选其一：
- 给
.truncate加min-width: 0（推荐）：触发flex item最小尺寸计算规则，允许内部inline-block按需收缩 - 给
li设flex-shrink: 0：阻止li被压缩，但可能破坏整体flex布局平衡
别漏掉这个：ol若设了flex: 1，而li没加min-width: 0，哪怕其他所有CSS都对，省略号照样不出现。
表格里嵌套ol时省略号总不生效
表格单元格（td）默认display: table-cell，会优先适应内容宽度，导致overflow: hidden失效——这是最隐蔽的坑，连span包住也没用。
必须同时满足三点：
-
table设table-layout: fixed（不能写在td上） -
table或col设明确宽度（如width: 100%） -
td设max-width（例如max-width: 200px），且内部span.truncate保持前述规则
漏掉table-layout: fixed，td就永远“感觉不到”自己该被截断——浏览器认为它有权无限变宽，text-overflow直接被忽略。
真正的难点不在写几行CSS，而在于搞清谁在控制宽度、谁在决定换行、谁又在偷偷压缩空间。序号和文字混在一起时，li不是普通块元素；放在flex或table里时，它更不是独立个体。省略号从来不是“加了就有效”的开关，而是多个渲染层达成共识后的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
