如何解决Bootstrap内容溢出卡片边界的问题_设置CSS的word-wrap与overflow-css教程-PHP中文网

应使用 overflow-wrap: break-word + white-space: normal + 明确宽度三件套；word-wrap 已废弃，white-space 优先级更高，Flex/表格等特殊布局需额外处理。

如何解决bootstrap内容溢出卡片边界的问题_设置css的word-wrap与overflow

word-wrap

已被废弃，直接用 overflow-wrap；只加它没用，必须配合容器宽度约束和 white-space 状态才能生效。

为什么 `overflow-wrap: break-word` 在 Bootstrap 卡片里不生效

不是属性写错了，而是它被父级默认样式“压住”了。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）
在 里单独加 text-break 不够，必须额外声明 style="white-space: normal;"，因为表格单元格默认是 white-space: nowrap
Safari 15.4 之前对标签不支持 text-break，此时要加 overflow-x: auto 保底


固定宽度卡片 + 长 URL 怎么写才不破布局
关键不在“能不能断”，而在“在哪断”。URL 有语义分隔符（/、.、-），应优先利用它们，而不是硬切字母。

											
												
												
													word-chinese-automation
													中文 Word 文档自动化校对工具。当用户需要对中文文本或 Word 文档进行标点符号检查、语法检查、错别字检查时使用此 skill。触发词：语法检查、错别字、标点符号、校对、检查文档。
												
												下载
												
											
										

推荐组合：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 却没给  设 width 和 max-width，导致换行逻辑被绕过
复杂点在于不同容器（flex、table、grid、绝对定位）对 overflow-wrap 的响应机制完全不同，不能套用同一套写法。