text-wrap 不是合法 CSS 属性，截至 2024 年底所有主流浏览器均不支持；真正控制孤行的是 orphans、widows 和 break-inside，但仅在多列、打印或特定容器中生效；响应式场景需结合 white-space、min-width、JavaScript 等主动干预。
text-wrap 属性在主流浏览器中根本不可用
截至 2024 年底，text-wrap 并不是合法的 CSS 属性，所有主流浏览器（Chrome、Firefox、Safari、Edge）均不支持它。你在 DevTools 中输入 text-wrap，会立刻被标记为无效声明——这不是兼容性问题，而是语法错误。
这个属性名常被误传，可能源于对 white-space、overflow-wrap 或草案中废弃提案（如早期 CSS Text Level 4 草稿里短暂出现又撤回的 text-wrap）的混淆。
真正控制孤行文字（widow/orphan）的 CSS 属性是 break-inside 和 orphans/widows
响应式布局中出现单字换行、标题末尾只剩一个词、段落首尾孤立一行等“孤行”，本质是分页/分栏/弹性容器断行时的排版断裂。CSS 提供了专门针对这类问题的控制机制：
-
orphans：指定段落末尾至少保留几行（用于多列或分页上下文） -
widows：指定段落开头至少保留几行 -
break-inside: avoid：阻止元素（如<h2>、<p>）被跨行/跨列/跨页截断
注意：这些属性在普通流式布局中效果有限，只有在以下场景才实际生效：
立即学习“前端免费学习笔记（深入）”；
- CSS 多列布局（
column-count） - 打印媒体（
@media print） - 使用
display: flow-root或contain: layout配合 flex/grid 容器时，部分浏览器（如 Safari）对break-inside有增强支持
日常响应式中防止文字孤行更实用的做法是组合 white-space + min-width + text-align
面对小屏幕下标题被强行折成“一”字、“的”字独占一行这类问题，靠纯排版属性往往失效，需主动干预断行点：
- 用
white-space: nowrap锁定短标题（如导航项），再配合overflow: hidden+text-overflow: ellipsis截断 - 给易折行的词加
\u00A0），但注意这会影响可访问性和 SEO - 用
min-width: max-content配合display: inline-block让容器“撑开不折”，再结合媒体查询收缩字体或隐藏次要文案 - 对按钮/标签类文本，用
text-align: center+width: fit-content避免左右留白导致意外换行
移动端 Safari 和 Chrome 对 widows/orphans 的支持仍不可靠
即使你在 @media screen and (max-width: 768px) 中写了 orphans: 2，iOS Safari 和 Android Chrome 基本忽略它——它们只在 PDF 导出或打印预览中部分识别这些属性。
这意味着：如果你的目标是让响应式页面在手机浏览器上避免孤行，不要依赖 orphans/widows，而应转向 JavaScript 辅助检测（如读取 getBoundingClientRect() 高度变化）或服务端模板控制换行逻辑（例如限制标题最大字符数并添加省略号）。
真正容易被忽略的是：孤行问题在视口缩放（user-scalable=yes）、动态字体加载（font-display: swap）、以及 WebKit 内核下 -webkit-hyphens 开启时的表现差异极大，测试必须覆盖真机缩放和不同渲染时机。
