Bootstrap 5+卡片文字不换行的根源是white-space: nowrap默认样式压制了word-wrap，须用white-space: normal重置，并配合overflow-wrap: break-word和word-break: break-word实现可靠换行。

Bootstrap卡片里文字不换行，word-wrap没用？

不是word-wrap失效，而是Bootstrap 5+默认给.card-body和子元素加了white-space: nowrap（尤其在.card-title、.card-text里），它会直接压制word-wrap和overflow-wrap。你得先覆盖掉这个行为。

• 优先用white-space: normal重置，而不是只靠word-wrap: break-word
• 对长英文/URL，还需配合overflow-wrap: break-word（word-wrap是它的旧别名，但CSS规范已推荐用新名）
• 如果内容含<pre class="brush:php;toolbar:false;">&lt;/code&gt;或&lt;code&gt;&lt;code&gt;&lt;/code&gt;块，默认不换行，得单独处理&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;Bootstrap 5中让&lt;code&gt;.card-text&lt;/code&gt;正确换行的最小样式&lt;/H3&gt;&lt;p&gt;直接在CSS里写针对性规则，比全局改&lt;code&gt;.card-body&lt;/code&gt;更安全——避免影响标题、按钮等其他元素。&lt;/p&gt;&lt;ul&gt;&lt;li&gt;给需要换行的文本容器加类，比如&lt;code&gt;.card-text-wrap&lt;/code&gt;，然后定义：&lt;pre class='brush:php;toolbar:false;'&gt;.card-text-wrap { white-space: normal !important; overflow-wrap: break-word; word-break: break-word; /* 针对长单词（如base64字符串） */ }</pre>
• 不要只写word-wrap: break-word：它在white-space: nowrap下完全不生效
• 避免用!important污染全局；但如果用Bootstrap SCSS，可在自定义变量后@extend或@include重写

遇到中文正常、英文/数字串不换行？检查word-break值

中文天然按字断行，但连续英文、数字、下划线组合（如very_long_variable_name_123）会被当一个“词”，overflow-wrap: break-word可能不触发——这时word-break就关键了。

• word-break: break-word：允许在任意位置断（包括字母中间），适合URL、token等
• word-break: break-all：更激进，连中文也可能被拆字（慎用）
• word-break: normal：依赖空格和标点，默认行为，对无空格长串无效
• 实际建议组合：overflow-wrap: break-word; word-break: break-word;

Vue/React组件里动态渲染卡片，样式不生效？

框架的scoped样式或CSS-in-JS可能让选择器权重不够，或样式未应用到最终DOM节点上。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

• 检查生成后的HTML结构：是不是.card-text被包在了<div>或<code><p></p>里？样式要写到最内层容器
• 在Vue单文件组件中，用::v-deep(.card-text)或:deep(.card-text)穿透作用域（依Vue版本而定）
• React中若用styled-components，确保目标元素有明确class，或用className手动传入自定义类名
• 临时调试：浏览器开发者工具里手动删掉white-space: nowrap，确认效果后再写CSS

Bootstrap卡片换行真正卡住人的地方，往往不是属性不会写，而是没意识到white-space这个“隐形锁”已经提前把换行拦死了。改完记得清掉缓存，再对着真实数据（比如API返回的长token或日志片段）测一遍。