本质是flex子项默认min-width:auto阻止收缩，必须在文字元素上显式设置min-width:0，再配合white-space:normal、overflow-wrap:break-word等规则才能正确处理长文本，否则按钮必被撑破。

按钮内长文本撑破容器，本质是 flex 子项没设 min-width: 0

你给按钮加了 display: flex，里面放文字和图标，结果一串长 URL 或英文单词直接把按钮拉宽、挤出父容器——这不是内容太长，而是 flex 默认阻止子项收缩。Flex 子项默认 min-width: auto，哪怕你写了 overflow-wrap: break-word，换行逻辑也被锁死。

修复只需一行 CSS，加在文字所在元素上（不是按钮本身）：

• min-width: 0 是硬性前提，漏掉就白配其他属性
• 如果文字用 <span class="btn-text"></span> 包裹，就给它加 min-width: 0
• 即使同时用了 flex: 1，min-width: 0 也不能省——flex: 1 只控制增长，不解除最小宽度限制

文字和图标共存时，white-space: normal 比 nowrap 更安全

很多按钮样式默认写 white-space: nowrap 防止折行，但遇上长文本+图标，这反而让文字无处可退，直接横向溢出或撑开整个按钮。尤其当图标用 float: right 时，文档流混乱，按钮根本算不准可用宽度。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 改用 white-space: normal，允许文字在空格、标点、连字符处自然断行
• 对 URL 或无空格字符串，再叠加 overflow-wrap: break-word 补充断词能力
• 图标必须脱离弹性伸缩：给图标元素加 flex: 0 0 auto，否则会被 flex 压缩变形

text-overflow: ellipsis 和换行不能共存

有人想“既截断又换行”，比如按钮里文字太长就显示省略号。这是无效组合：text-overflow: ellipsis 要求 white-space: nowrap + overflow: hidden + 明确宽度，而换行依赖 white-space 允许折行——二者底层逻辑冲突，浏览器直接忽略 ellipsis。

• 要省略号，就放弃换行，走单行截断路线
• 要换行，就别配 text-overflow，用 pre-wrap 或 normal + overflow-wrap
• 真需要“多行+末尾省略”，只能 JS 动态测量高度后截断，CSS 无原生解法

表格里的按钮更易出问题，先查 td 是否被 white-space: nowrap 锁死

把按钮放进 td 后突然撑破整行？大概率是 Bootstrap 或重置样式偷偷给 td 加了 white-space: nowrap，或者没设 table-layout: fixed，导致列宽由内容决定，换行规则失效。

• 给 td 显式重置：white-space: normal
• 给 table 加 table-layout: fixed，否则 overflow-wrap 基本不起作用
• 按钮内部仍需 min-width: 0，表格环境不会自动解除 flex 子项的收缩限制

实际中最容易被忽略的，是 min-width: 0 必须加在文字容器上，而不是按钮或父 flex 容器；而且它和 flex: 1 不是替代关系，是共存前提。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！