caption用于表格标题，figcaption用于图片说明；二者均不自动换行，需用white-space: pre-line等CSS控制；视频字幕应使用track+WebVTT，不可用HTML样式干预。

HTML里没有叫“字幕标签”的标准元素——你可能指的是 （表格标题）、

（图片/媒体说明）或富文本中用户输入的字幕类文本（如视频字幕、弹幕、歌词）。它们换行逻辑完全不同，不能一概而论。

caption 和 figcaption 换行靠 CSS white-space

这两个是语义化容器，本身不控制换行。浏览器默认按 white-space: normal 渲染：合并空格、自动折行。若原始内容含 \n（比如后端返回的多行字幕字符串），它会被当成空格忽略。

• 想保留换行符？加 white-space: pre-line：换行生效，多余空格合并，适合地址式字幕（如“主讲人：李四\n时间：2026-10”）
• 想保留所有空格+缩进（如 ASCII 字幕艺术）？用 white-space: pre，但注意长行会横向溢出
• 避免用 white-space: pre-wrap 在小宽度容器里——它保留空格又允许断行，容易把“一个词中间”劈开
• 默认居中且加粗，别只改换行忘了重置 text-align 或 font-weight

动态字幕（如 video + track）不走 HTML 换行逻辑

真正在视频上显示的字幕，来自 标签引用的 WebVTT 文件。它的换行由 VTT 语法决定：
标签有效，\n 也有效，但必须写在 内容体里，不是 HTML 层面加样式能干预的。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• WebVTT 中换行写成 第一行
第二行 或直接回车（需确保文件编码为 UTF-8 且无 BOM）
• 不要试图用 JS 把 VTT 字符串塞进
  再加 white-space——这绕过了原生字幕渲染，丢失同步、定位、字体抗锯齿等能力
• 若需自定义样式（如阴影、背景），应通过 ::cue 伪元素，例如：::cue { white-space: pre-line; }

用户提交的字幕文本（如评论区歌词）要防 XSS 并转义换行

这类文本通常来自表单或 API，含原始 \n，直接 innerHTML 渲染会丢失换行，且有安全风险。

• 绝对不要用 .innerHTML = text.replace(/\n/g, '
') —— 若 text 含 <script></script>，就执行了
• 安全做法：先用 textContent 插入纯文本，再用 CSS 控制换行：white-space: pre-line；或手动创建
节点（需 DOMParser 或 createElement）
• 如果必须支持简单 HTML（如 ），用 DOMPurify 过滤后再 replace(/\n/g, '
')
• 移动端要注意：iOS Safari 对 pre-line 的断行位置偶尔偏移，可加 word-break: break-word 补充兜底

最易被忽略的一点：换行是否影响可访问性。屏幕阅读器对 pre-line 容器读作连续语句，而 本身已带语义角色 role="caption"，无需额外 aria-label；但手动生成的字幕

必须加 role="region" aria-live="polite" 才能被正确播报。