ol 本身不换行，真正影响换行的是 li 内容长度与 CSS 渲染；li 默认块级独占一行，但内容短且容器宽时会自然折行；长无空格字符串需用 overflow-wrap: break-word 强制断行。
ol 本身不换行，是 li 内容决定是否折行
HTML 的 ol 是语义容器，它自己不会“换行”——真正影响视觉换行的是每个 li 的内容长度和 CSS 渲染行为。默认情况下，li 是块级元素，每项独占一行；但只要内容足够短、容器够宽，且没强制设置 white-space: nowrap，它就会像普通段落一样自然折行。
常见错误现象：在 li 里写了一长串无空格的英文或数字（比如 abcdefg1234567890...），结果溢出容器、撑破布局，看起来像“没换行”。这不是 ol 的问题，而是文本流失控。
- 检查是否误用了
white-space: nowrap（尤其在重置样式表中） - 确认
li宽度未被设为固定值（如width: 200px）而内容超长 - 避免在
li中嵌套div并设display: inline-block后又忘了处理换行逻辑
长文本强制换行：用 overflow-wrap 或 word-break
当 li 内含不可分割的长字符串（如 URL、哈希值、连续数字），需主动启用断词机制。推荐优先使用 overflow-wrap: break-word，它只在必要时才断开单词，保留可读性；word-break: break-all 更激进，适合纯技术字段。
示例：
li {
overflow-wrap: break-word;
/* 可选：防止单词内连字符被截断 */
-webkit-hyphens: auto;
hyphens: auto;
}
-
overflow-wrap: break-word在内容超出容器时触发，不破坏正常空格分隔逻辑 -
word-break: break-all会无视语义强行断开任意位置，慎用于中文或带标点的句子 - 若要兼容旧版 Safari（≤15.6），需加
word-wrap: break-word（overflow-wrap的旧名）
多行 li 中序号与文字错位？重点调 line-height 和 vertical-align
当 li 内容换行后，编号（::marker）常和第二行文字不对齐，尤其换了自定义字体或设置了 line-height: 1.6 之后。这不是 bug，是浏览器对 ::marker 基线计算方式与父 li 不一致导致的。
实操建议：
- 统一用
line-height数值（如1.4），避免用em或rem，防止继承放大偏差 - 给
li::marker加vertical-align: top或middle，再微调margin-top（±1px 常见） - 若用
li::before替代::marker，可完全控制定位：position: absolute+left: -1.5em - 别依赖
list-style-position: inside—— 它会让编号进入内容流，反而加剧多行错位
横向排列 ol 时，换行逻辑变成 flex-wrap 控制
如果把 ol 设为 display: flex 实现关键词/标签式横向布局，那“换行”就由 flex-wrap: wrap 决定，不再是文本流行为。此时每个 li 是 flex item，其宽度、min-width、flex-basis 才真正影响何时折行。
关键点：
- 必须显式写
ol { list-style: none; padding-left: 0; }，否则原生圆点/数字会干扰 flex 排列 -
li建议设flex: 0 0 auto或具体min-width（如min-width: 80px），避免压缩变形 - 不要给
li设width: 100%，否则所有项都会强制单列显示 - 响应式切换方向时，
flex-direction: column要配合align-items: flex-start，否则序号可能居中偏移
最易被忽略的是：无论怎么调 CSS，只要 ol 里混了非法子元素（比如直接放 div 或文本），浏览器就会自动修复 DOM，导致后续所有换行、对齐、计数逻辑失效——结构合规永远是前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
