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></h2>、<p></p>）被跨行/跨列/跨页截断

注意：这些属性在普通流式布局中效果有限，只有在以下场景才实际生效：

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

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

下载

• 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 截断
• 给易折行的词加  （如 “React Native”）或 Unicode 不间断空格（\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 开启时的表现差异极大，测试必须覆盖真机缩放和不同渲染时机。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！