如何设置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），两者叠加能覆盖大多数混合文本场景。