使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
ol列表项文字不换行通常是white-space:nowrap导致,应设li{white-space:normal};动态内容含\n需用white-space:pre-line+innerhtml;需独立样式则用flex布局包裹div。

ol列表项里文字换行不生效?先确认是不是white-space惹的祸
默认情况下,<ol></ol> 里的 <li> 内容会按正常文本流换行,但如果你发现文字挤成一长条、死活不断行,大概率是某层 CSS 悄悄加了 white-space: nowrap(常见于重置样式表或 UI 框架)。检查开发者工具的 computed 样式,重点看 white-space 值是否为 nowrap。
修复只需显式覆盖:li { white-space: normal; }。别只写 pre-line——它只对源码里的 \n 生效,而你通常用的是自然空格分词。
想在
<br>但别滥用
<br> 确实能在 <li> 中强制换行,比如地址、诗句这类结构固定的内容:
建国路8号SOHO现代城D座12层
但注意三点:
-
<br>是纯表现标签,无语义;若内容来自后端(含\n),它根本不会出现,得靠 CSS 处理 - 别在
<li>里嵌套<p></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>,再让 <code><li> 变成 flex 容器:
关键点:
- 避免用
<p></p>包每行——默认有margin,撑开<li>高度,还得额外重置 -
gap比margin更干净,不触发外边距合并 - 如果行数不确定且需响应式,
flex-direction: column比多列 Grid 更轻量
最常被忽略的是:white-space 和 overflow-wrap 这类属性从不单独起作用,它们依赖宽度约束(max-width)和布局上下文(比如父容器是否是 flex 或 table)。调的时候别只盯一个属性,得连着看 width、display、container 的 computed 值。










