WebVTT字幕换行只能用\n实现，不支持HTML标签或CSS控制；需用Unix换行符、空行分隔时间与正文、避免空格；如需精细排版，应改用JS自定义字幕层。

track元素的提示文本不支持换行

track 元素本身（尤其是 kind="subtitles" 或 kind="captions"）的提示文本（即 WebVTT 文件中的 cue 文本）**不能通过 HTML 标签或 CSS 直接控制换行**。浏览器渲染字幕时，会忽略
、white-space 等常规手段；所有换行必须由 WebVTT 文件内部的换行符（\n）触发，且受浏览器排版引擎限制。

WebVTT 中正确写换行的格式

换行只能在 .vtt 文件的 cue 正文里用原生 \n（LF）实现，注意以下几点：

• 必须用 Unix 风格换行符 \n，不要用 \r\n（Windows）或 \r（旧 Mac），否则部分浏览器（如 Safari）可能忽略第二行
• cue 时间行与正文之间需空一行，正文内换行可直接写：

  1<br>00:00:01.000 --> 00:00:04.000<br>第一行内容<br>第二行内容

• 避免首尾空行或多余空格，否则可能被截断或显示异常
• 单行长度建议不超过 42 字符（移动端适配需要），过长时浏览器会自动折行，但行为不可控

无法用 CSS 控制 track 提示文本的 white-space

给 或其父 设置 white-space: pre-line 等样式完全无效——因为字幕是浏览器合成层绘制的 overlay，不走 DOM 流，也不响应普通 CSS 文本属性。常见错误包括：

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

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

下载

• 在 上加 style="white-space: pre-wrap;" → 无任何效果
• 尝试用 JS 修改 track.mode = "showing" 后再注入样式 → 依然不生效
• 给 标签加 class 或 inline style → 属性被忽略，DOM 中不可见

需要多行精细控制？改用自定义字幕层

如果业务要求动态换行、富文本、点击交互或响应式断行（比如中英文混排时按语义拆分），track + WebVTT 就不够用了。此时应放弃原生字幕，改用：

• 监听 video 的 timeupdate 事件，用 JS 匹配时间轴，把字幕数据渲染到覆盖在视频上的
  层
• 该
  可自由应用 white-space: pre-line、max-width、line-clamp、甚至 display: flex; flex-wrap: wrap
• 注意：需手动处理字体抗锯齿、阴影、背景遮罩（避免文字被视频内容干扰）
• WebVTT 解析可用 vtt.js，它能把 .vtt 转成结构化 JSON，方便 JS 处理

原生 track 的换行能力极其有限，它的设计目标是轻量、跨平台、无障碍兼容，不是灵活排版。真正要“控制怎么换”，就得跳出 WebVTT，接管渲染权。