孤行（widow/orphan）指段落末尾或标题开头单独断行与主体分离，移动端因视口窄、行高大更易触发；orphans/widows属性对h1~h6无效，因其非多行块级文本；应改用white-space、word-break、hyphens或min-width等主动控制折行。
什么是孤行（widow/orphan）及其在移动端的实际表现
CSS里的孤行问题，不是“页面只有一行字”这种字面意思，而是指段落末尾或标题开头单独被挤到新行、和主体内容断开——比如一个两字标题简介在窄屏上被强行拆成“简”在上一行、“介”在下一行，或者标题单独占顶、下面正文却空出一大截。这种断裂感在移动端特别刺眼，因为视口宽度小、行高相对大，line-height和font-size稍一变化就容易触发。
orphans 和 widows 属性为什么对标题几乎无效
这两个属性只作用于**块级元素内的文本行**，且前提是该元素有明确的多行内容（比如p、div里含换行文本）。标题标签如h1~h6默认是单行渲染，即使文字被强制折行，浏览器也不认为它满足“多行段落”的触发条件，所以设orphans: 2对h2完全没反应。
- 别浪费时间给
h3加widows——它不会生效 - 真要控制标题折行行为，得靠
white-space、word-break或hyphens - 部分旧版 Safari 对这些属性支持不稳定，需实测
真正管用的标题孤行控制方案
核心思路是：不让浏览器“自由决定”在哪断行，而是主动约束断点位置或预留空间。以下方法按优先级排列：
- 用
white-space: nowrap禁用折行——适合短标题（如联系我们），但超长时会溢出容器，需配合overflow: hidden或text-overflow: ellipsis - 用
word-break: keep-all+hyphens: auto组合——让浏览器优先不断开词语，必要时才在音节处连字符换行（需lang属性配合，如lang="zh"） - 对极短标题（如两字词），加
min-width兜底，例如min-width: 3em，确保至少撑开一定空间再换行
示例：
h4 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
响应式中容易被忽略的兼容性细节
安卓 WebView 和 iOS Safari 在处理hyphens时差异很大：iOS 15+ 支持hyphens: auto中文分词（依赖系统词典），而多数安卓机型直接忽略；word-break: keep-all虽广泛支持，但在某些 Android 12+ 系统里会和font-feature-settings冲突，导致标点悬挂异常。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必用真机，模拟器常漏掉渲染细节
- 避免在
h1上同时启用hyphens和text-transform: uppercase——大小写转换可能干扰分词逻辑 - 如果项目需强兼容，宁可手动插入
（零宽空格）控制断点，比依赖 CSS 更可控
复杂点不在规则多，而在不同设备对同一段 CSS 的解释不一致——与其堆砌属性，不如先锁定最常出问题的那几个标题，逐个加min-width或white-space微调。
