ol本身不支持文本两端对齐，需在li上同时设置text-align: justify和text-align-last: justify，并满足多行、块级、中文断词等条件才可能生效。
ol 本身不支持文本两端对齐；真正起作用的是 text-align: justify 和 text-align-last: justify，但必须作用在 li 元素上，且需满足多行、块级、中文断词等前提条件。单行、无换行、未设宽度，或浏览器不支持 text-align-last，都会让效果消失。
为什么直接给 ol 或 li 加 text-align: justify 没用
常见错误是只写 ol { text-align: justify; } 或 li { text-align: justify; }，却没意识到：justify 对单行文本默认无效；ol 和 li 是块级元素，但若容器太宽、文字太短、或未限制宽度，浏览器根本不会触发换行，也就没有“多行”可 justify；中文段落还缺天然断点，多数浏览器（尤其 Safari ≤16.4）会跳过拉伸逻辑。
必须同时满足以下条件才可能生效：
-
li设了明确的width或max-width（比如max-width: 300px） -
li内容足够长，自然换行 ≥2 行 -
li上写了text-align: justify和text-align-last: justify - 避免
white-space: nowrap或display: inline破坏块级流
text-align-last: justify 在 li 中为何常被忽略
这个属性不是独立开关，而是 text-align: justify 的“补丁”。它只在 text-align 值为 justify 时才被解析；否则浏览器直接跳过。更关键的是：它仅作用于块级元素的**最后一行**——如果 li 只有一行，它就完全不生效。
立即学习“前端免费学习笔记（深入）”；
解决思路不是“让它变成最后一行”，而是“确保它参与 justify 流程”：
- 给
li加::after { content: ""; display: inline-block; width: 100%; }，强制制造视觉换行，使原文本成为倒数第二行，从而被justify拉伸 - 配合
word-break: keep-all防止中文被意外断词（尤其表格内或固定宽容器中） - 不要依赖
text-align-last单独生效——漏掉text-align: justify就等于没写
中文 ol 列表两端对齐的兼容性现实
想在生产环境稳定实现，得接受三个事实：
- Safari ≤16.4 不支持
text-align-last，iOS 15.3 及更早版本直接忽略该声明 -
text-justify: inter-character虽能强制按字拉伸，但仅 Chromium 120+ / Firefox 110+ / Safari 17.4+ 支持，且必须搭配lang="zh"才可靠 - 伪元素方案（
::after）虽可用，但会破坏语义结构，屏幕阅读器可能误读空块
最务实的做法：对 li 同时写 text-align: justify 和 text-align-last: justify，再加 @supports (text-align-last: justify) 做渐进增强，旧浏览器 fallback 到左对齐——毕竟列表语义重于排版精度。
别碰 list-style-position: inside 来凑两端对齐
有人试图用 list-style-position: inside 把序号“塞进内容流”，再配合 justify 拉伸，结果发现第二行文字顶到序号下方、基线错乱、甚至被截断。这不是 bug，是规范行为：inside 会让序号参与行盒布局，但无法控制垂直对齐细节，尤其在自定义字体或非标准 line-height 下极易崩。
真正可控的方式是关掉默认序号：ol { list-style: none; }，改用 li::before { content: counter(list-item) ". "; }，再单独控制 li::before 和 li 的对齐与间距——但注意：这已不属于“文本两端对齐”，而是彻底重构编号渲染逻辑。
