safari 中 overflow-wrap: break-word 不生效需同时设置 width/max-width、min-width: 0（flex/grid 子项）和 white-space: normal，缺一不可。
overflow-wrap: break-word 在 Safari 中不生效？先确认是否写了 width 或 max-width
只写 overflow-wrap: break-word 而不设宽度，Safari（尤其是 iOS 15.4–16.3）会直接忽略换行逻辑——因为它没“边界”可依。这不是 bug，是规范行为：浏览器必须知道容器有多宽，才能决定在哪断。
- 必须搭配
width、max-width或flex-basis（在 Flex 子项中） - 写
max-width: 100%比width: 100%更安全，避免父级 padding 或 border 导致溢出 - 在 Grid/Flex 子项里，仅设
overflow-wrap不够，还得加min-width: 0（否则 Safari 默认min-width: auto锁死宽度）
中文/长英文在 Safari 里仍不折行？检查 white-space 和 word-break 组合
white-space: nowrap 是最常被忽略的“关闸人”——哪怕你写了 overflow-wrap，只要父级或自身继承了 nowrap，所有换行都会失效。
- 显式重置：
white-space: normal（或pre-wrap，如果需保留缩进） - 中文为主场景，用
word-break: break-word（注意：这是非标准别名，实际应写overflow-wrap: break-word；但 Safari 旧版本需两者共存） - 纯英文长串（如 URL），优先用
overflow-wrap: anywhere（Safari 15.4+ 支持），比break-word更可靠；若需兼容 Safari 14，请降级为word-break: break-all
Flex/Grid 容器内文字撑破布局？min-width: 0 是 Safari 的硬性要求
Safari 对 Flex/Grid 子项的默认 min-width: auto 执行得非常严格——它宁可让文字溢出，也不允许内容收缩换行。Chrome 和 Firefox 会更“宽容”，这导致本地测试正常、上线后 Safari 失效。
- 给 Flex/Grid 直接子元素加
min-width: 0（不是父容器） - 若子项是
<p></p>或<span></span>，确保它们没被设成display: inline（inline 元素不响应min-width） - 配合使用：
overflow-wrap: break-word+min-width: 0+width: 0（在某些 Safari 14–15.2 场景下，width: 0比max-width: 100%更有效）
移动端 Safari 换行异常？viewport 和选择器特异性会暗中干扰
媒体查询生效但换行规则不触发，往往不是 CSS 写错了，而是 Safari 的渲染链路被卡在上游：viewport 声明不完整，或选择器被用户代理样式覆盖。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须补全maximum-scale=1.0, user-scalable=no，否则 iOS Safari 可能因缩放状态误判视口宽度 - 避免用
*或div p这类低特异性选择器写换行规则；改用.text-content或article p显式指定 - 上线前用 Safari DevTools 的 “Computed” 面板，逐层检查
overflow-wrap、white-space、min-width是否真实生效，而非被 inherited 或 overridden
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
