如何设置CSS使Bootstrap卡片内容不溢出边界？

本文共计864个文字，预计阅读时间需要4分钟。

属性写错了，而是它被父级默认样式‘压缩’了。 Bootstrap 的 `.card`、`.card-body` 等组件通常自带 `overflow: hidden;`，这个声明会裁剪掉换行后的多出行高，导致视觉上看似没有折行。

• 先检查目标文本元素的**直接父容器**是否含 overflow: hidden（比如 .card-body）
• 若需保留隐藏溢出但又要换行，把 overflow: hidden 换成 overflow: visible 或删掉，再靠 max-width 控制边界
• 确认没误设 white-space: nowrap——它会让所有换行规则失效，包括 overflow-wrap
• 临时加 outline: 1px solid red 看盒子实际尺寸，很多“溢出”其实是容器本身没被限制住

Bootstrap 5 中该用 text-wrap 还是 text-break

优先组合使用：text-wrap text-break。前者恢复 white-space: normal，后者等价于 word-break: break-word（注意：不是 overflow-wrap），两者叠加能覆盖大多数混合文本场景。

• text-wrap：解决空格分隔的长英文、中英混排（如 “Service License No. FSSAI-2026-XXXXXX”）
• text-break：解决无空格长串（如 URL、UUID、base64）
• 在 <td> 里单独加 text-break 不够，必须额外声明 style="white-space: normal;"，因为表格单元格默认是 white-space: nowrap
• Safari 15.4 之前对 <pre> 标签不支持 text-break，此时要加 overflow-x: auto 保底

固定宽度卡片 + 长 URL 怎么写才不破布局

关键不在“能不能断”，而在“在哪断”。URL 有语义分隔符（/、.、-），应优先利用它们，而不是硬切字母。

• 推荐组合：overflow-wrap: break-word; word-break: normal; —— 先尝试在斜杠、点号处断，不行再退到字母级
• 必须设 max-width: 100% 或具体像素值（如 max-width: 280px），否则 overflow-wrap 不触发
• 避免 display: inline-block 包裹 URL 文本——inline 元素无视 overflow-wrap
• 如果卡片用了 flex 布局，子项要加 min-width: 0 或 flex-shrink: 1，否则 flex item 会拒绝收缩，导致换行失败

调试时最容易忽略的三个盒模型条件

写了 overflow-wrap 还溢出？90% 是以下某一条没满足：

立即学习“前端免费学习笔记（深入）”；

• 父容器没设 width 或 max-width（比如只用了 display: inline-block 却没限宽）
• 文本元素本身是 position: absolute 且没配 left/right 或 width，脱离文档流后 overflow-wrap 失效
• 用了 table-layout: fixed 却没给 <td> 设 width 和 max-width，导致换行逻辑被绕过

复杂点在于不同容器（flex、table、grid、绝对定位）对 overflow-wrap 的响应机制完全不同，不能套用同一套写法。