ol和li默认是块级元素，不换行的真正原因是浏览器将li视为不可分割的“行盒”，内容超宽时优先撑开容器而非折行；解决需控制li内部文本换行，如设overflow-wrap: break-word并配合max-width。
ol列表项不换行是因为默认display:inline-block？
不是。ol 和 li 默认都是块级元素，不换行的真正原因是：浏览器把整个 li 当作一个不可分割的“行盒”，当内容超宽时，它宁可撑开容器也不折行——尤其在含长单词、URL 或无空格字符串时更明显。
解决方向不是改 ol，而是控制 li 内部文本的换行行为：
- 对
li设置word-break: break-word或overflow-wrap: break-word（推荐后者，语义更准确） - 若含英文长串或 Base64 等无空格内容，加
hyphens: auto可辅助断词（需注意 Safari 对hyphens的语言属性依赖） - 避免误用
white-space: pre-wrap——它保留换行符和空格，但会破坏列表项前的序号对齐
用flex布局让ol横向排列后再换行？
可以，但要注意这已脱离语义化初衷：ol 表示有序逻辑关系，强行 flex 横排 + flex-wrap: wrap 会让屏幕阅读器仍按垂直顺序读出，视觉却错乱，不符合无障碍要求。
真要横排多列，优先用 CSS 多列（column-count）：
立即学习“前端免费学习笔记（深入）”；
ol {
column-count: 3;
column-gap: 1.5em;
}
li {
break-inside: avoid; /* 防止单个li被劈到两列 */
}注意：column-count 在 Firefox 中对 ol 序号支持稳定；Chrome/Safari 早期版本可能重复计数，建议测试 counter-reset 是否异常。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
为什么list-style-position: inside不能解决换行问题？
list-style-position: inside 只是把序号纳入 li 的 content box，让文本环绕序号，但它不改变文本本身的换行策略。如果 li 里有一段 200 字符无空格的字符串，依然会溢出。
正确组合是：
-
list-style-position: inside（让序号参与排版流） -
li { overflow-wrap: break-word; }（强制内部文本可断） - 必要时补充
max-width: 100%（防止单词拉伸父容器）
移动端适配时ol突然堆成一列？
常见于用了 display: grid 或媒体查询中错误重置了 ol 的 display。检查是否无意覆盖了：
@media (max-width: 768px) {
ol {
display: block; /* ✅ 正确，保持默认 */
}
/* 错误示例 ↓ */
/* ol { display: inline-flex; } —— 会丢失序号 */
/* ol { columns: 1; } —— 可能触发重排异常 */
}更稳妥的做法是只约束 li 宽度：li { max-width: 100%; }，再配合 overflow-wrap，这样无论容器怎么缩，都能自适应折行。
最易被忽略的一点：某些 CMS 或 Markdown 解析器会把 ol 包进 <div class="content">，而该 <code>div 设了 white-space: nowrap ——这时候再调 li 也没用，得先揪出外层污染样式。
