css 响应式设计中的自动换行与分页_灵活显示内容

white-space 控制换行行为，normal 允许换行但不断单词，nowrap 禁止换行；需配合 overflow-wrap: break-word 和 word-break: anywhere 实现长英文折行，flex 项需 min-width: 0 防溢出，打印时用 break-inside: avoid 包裹段落，中英混排推荐零宽空格或 hyphens: auto。

text-wrap: wrap 与 white-space 的实际效果差异

CSS 中没有 text-wrap: wrap 这个合法属性值，常见误写源于混淆了 overflow-wrap、word-break 和 white-space。真正控制“是否换行”的核心是 white-space：normal（默认）允许换行，nowrap 强制不换行，pre-wrap 保留换行符且允许自动折行。

如果你希望长英文单词或 URL 在容器内自动折断，仅设 white-space: normal 不够——它不会打断连续字母流。必须配合：

• overflow-wrap: break-word（旧名 word-wrap: break-word），在必要时打断长单词
• 或 word-break: break-word（注意：该值已废弃，应改用 break-all 或 keep-all）
• 现代推荐组合：overflow-wrap: break-word; word-break: anywhere;，后者在支持的浏览器中更可控

flex / grid 布局下内容溢出导致的换行失效

当容器使用 display: flex 且子项未设置 flex-shrink: 1 或 min-width: 0 时，即使文本本身可换行，整个 flex item 也会因“最小内容宽度”而拒绝收缩，造成横向溢出、换行被跳过。

典型修复方式：

• 给 flex 子项加 min-width: 0（触发 flex item 的最小尺寸计算逻辑）
• 同时确保文本容器有 overflow-wrap: break-word 和 word-break: anywhere
• 若子项是 inline-flex 或含 white-space: nowrap 的后代，需逐层检查并重置

.card-content {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: anywhere;
}

@media 分页打印时 content 换行与分页控制

浏览器打印预览中，page-break-inside: avoid 和 break-inside: avoid 是控制分页的关键，但它们对文本段落无效——只对块级容器起作用。想让一段文字不被截断在两页之间，必须将其包裹在具备 break-inside: avoid 的 或

@media print {
  .print-section {
    break-inside: avoid;
    font-size: 12pt;
    line-height: 1.4;
  }
}