ol列表项文字不换行通常是white-space:nowrap导致，应设li{white-space:normal}；动态内容含\n需用white-space:pre-line+innerHTML；需独立样式则用flex布局包裹div。
ol列表项里文字换行不生效？先确认是不是white-space惹的祸
默认情况下，<ol> 里的 <li> 内容会按正常文本流换行，但如果你发现文字挤成一长条、死活不断行，大概率是某层 CSS 悄悄加了 white-space: nowrap（常见于重置样式表或 UI 框架）。检查开发者工具的 computed 样式，重点看 white-space 值是否为 nowrap。
修复只需显式覆盖：li { white-space: normal; }。别只写 pre-line——它只对源码里的 \n 生效，而你通常用的是自然空格分词。
想在
<br>但别滥用
<br> 确实能在 <li> 中强制换行，比如地址、诗句这类结构固定的内容：
<li>北京市朝阳区<br>建国路8号SOHO现代城D座12层</li>
但注意三点：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<br>是纯表现标签，无语义；若内容来自后端（含\n），它根本不会出现，得靠 CSS 处理 - 别在
<li>里嵌套<p>或其他块级元素——HTML 规范不允许，解析器可能自动闭合或错位 - 连续多个
<br>不等于“空行”，实际间距由line-height和字体大小决定，不是可控的 margin
动态内容带\n换行符？必须配white-space: pre-line + innerHTML
后端返回的字符串如 "第一行\n第二行"，浏览器默认忽略 \n。此时不能靠 <br>，而要：
- 给
<li>加样式：white-space: pre-line;（保留换行、合并空格，最安全） - JS 插入时用
innerHTML，不是innerText；否则\n会被当普通字符显示 - 如果后端存的是字面量
<br>字符串，得先用.replace(/<br>/gi, '\n')转成真实换行符
需要每行独立样式或交互？别硬折，改用div + flex
当某一行要加背景、点击事件、不同字号，或者要垂直居中对齐时，<br> 和 white-space 都做不到结构隔离——它们只是视觉分行。
正确做法是把每行内容包进独立 <div>，再让 <li> 变成 flex 容器：
<li style="display: flex; flex-direction: column; gap: 4px;"> <div>第一行（可加class、事件、样式）</div> <div>第二行（支持 hover、background）</div> </li>
关键点：
- 避免用
<p>包每行——默认有margin，撑开<li>高度，还得额外重置 -
gap比margin更干净，不触发外边距合并 - 如果行数不确定且需响应式，
flex-direction: column比多列 Grid 更轻量
最常被忽略的是：white-space 和 overflow-wrap 这类属性从不单独起作用，它们依赖宽度约束（max-width）和布局上下文（比如父容器是否是 flex 或 table）。调的时候别只盯一个属性，得连着看 width、display、container 的 computed 值。
