需用CSS实现换行：设overflow-wrap: break-word（兼容旧Safari双写word-wrap），配合max-width；Flex布局下须加min-width: 0；保留用户换行用white-space: pre-wrap。
字幕标签（<caption></caption>）本身不支持自动换行，得靠 CSS 控制
<caption></caption> 是语义化标签，用于表格标题，默认是块级元素、会独占一行，但它**不会自动处理长文本换行**——尤其当内容含 URL、连续英文或中文无空格字符串时，直接溢出表格边界。这不是 bug，是它的默认行为。要让它“看起来自动换行”，本质是给它加 CSS 折行规则，而不是改标签用法。
overflow-wrap: break-word 是最安全的换行方案
对 <caption></caption> 元素设置 overflow-wrap: break-word，能保证只在必要时断开超长不可分字符串（比如 https://example.com/verylongpath），同时保留单词完整性。它比 word-break: break-all 更友好，后者会把“用户”切成“用”和“户”，中文场景下慎用。
- 必须配合明确宽度（如
max-width: 100%或固定值），否则浏览器无法判断“何时该换” - 旧版 Safari（iOS 12–13）只认
word-wrap: break-word，建议双写：word-wrap: break-word; overflow-wrap: break-word; - 别设
white-space: nowrap，它会直接禁用所有换行逻辑
Flex 布局下 <caption></caption> 溢出？检查 min-width: 0
如果表格用了 display: flex（比如自定义表格组件），而 <caption></caption> 是其子项，那即使写了 overflow-wrap，它仍可能撑破容器——因为 flex item 默认 min-width: auto，阻止内容收缩。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 修复方式：给
<caption></caption>加min-width: 0（不是父容器） - 不要靠
overflow: hidden掩盖问题，它只是裁掉内容，不是真换行 - 若 caption 在
flex-direction: column容器里，“换行”概念不适用，那是垂直堆叠
想保留原始换行符？用 white-space: pre-wrap
当 caption 内容来自用户输入（比如后台可编辑的表格说明），且你希望保留其中的 \n 换行符，同时又不让超长行溢出，white-space: pre-wrap 是唯一兼顾两者的选择。
立即学习“前端免费学习笔记（深入）”；
- 它会保留所有空格、制表符和换行符，同时允许在容器边界处自动折行
- 不能用
white-space: pre，它不折行，长内容会横向滚动 - 避免混搭
white-space: normal和pre-wrap，后者会覆盖前者
真正难的不是写哪条 CSS，而是判断 caption 的内容来源和上下文布局——flex 容器、响应式断点、旧版 Safari 兼容、是否需保留用户换行，这些条件一叠加，单靠一个属性根本不够。实际项目里，往往得组合 max-width、min-width: 0、overflow-wrap 和 white-space 四者才能稳住。
