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 的 <div> 或 <p> 中，并确保该元素未设置 display: inline 或 float。
响应式打印还需注意：
- 移动端 CSS（如
font-size: 1.2rem）可能在打印时被忽略，建议用@media print单独定义字号与行高 -
white-space: pre-line在打印中常导致意外空行，建议统一用normal - 避免用
height+overflow: hidden截断内容——打印时会直接丢弃溢出部分
@media print {
.print-section {
break-inside: avoid;
font-size: 12pt;
line-height: 1.4;
}
}
中文与英文混排下的换行行为差异
中文天然按字换行，无需额外配置；英文依赖空格或连字符。但中英混排时，浏览器对“中-英”“英-中”边界是否换行并不一致：overflow-wrap: break-word 对中文无影响，但对紧贴中文的英文单词（如 测试version123）可能不触发折行。
可靠方案是主动插入零宽空格（）或使用 word-break: break-all（慎用，会打断所有单词），更推荐：
- 用
unicode-bidi: plaintext重置双向文本算法干扰 - 对关键混排区域加
hyphens: auto（需配合lang属性和浏览器支持） - 服务端或 JS 预处理，在中英文交界处插入
，例如text.replace(/([a-zA-Z])([\u4e00-\u9fa5])/g, '$1$2')
这个细节在 PDF 导出或打印场景中极易暴露，但开发阶段常被忽略。
