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 换行与分页控制
浏览器打印预览中， 模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动 响应式打印还需注意： 中文天然按字换行，无需额外配置；英文依赖空格或连字符。但中英混排时，浏览器对“中-英”“英-中”边界是否换行并不一致： 可靠方案是主动插入零宽空格（ 这个细节在 PDF 导出或打印场景中极易暴露，但开发阶段常被忽略。page-break-inside: avoid 和 break-inside: avoid 是控制分页的关键，但它们对文本段落无效——只对块级容器起作用。想让一段文字不被截断在两页之间，必须将其包裹在具备 break-inside: avoid 的 
display: inline 或 float。
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 属性和浏览器支持），例如 text.replace(/([a-zA-Z])([\u4e00-\u9fa5])/g, '$1$2')
