手机端空格不折行主因是white-space:nowrap被继承或误加；推荐用white-space:pre-line处理换行，配合overflow-wrap:break-word断长词，并设min-width:0防flex锁死。
手机端文本空格不折行，90% 是 white-space: nowrap 被悄悄继承或误加，而不是“字体太小”或“内容太长”。
为什么手机上空格突然不生效？
PC 浏览器默认对空格、换行符较宽容，但移动端（尤其 iOS Safari 和部分 Android WebView）对 white-space 更严格：一旦父级或全局样式链中存在 white-space: nowrap（比如来自 UI 框架的按钮、导航栏、Flex 容器），子元素即使没显式设置，也可能被继承并锁死换行能力。
常见触发点：
- 第三方组件库（如 Vant、Ant Design Mobile）给
.van-button或.am-navbar-title加了white-space: nowrap - Flex 布局容器未设
min-width: 0，导致子元素拒绝收缩、无法触发自动换行 - 用
<pre class="brush:php;toolbar:false;"></pre>包裹普通文本，等宽字体 + 不折行，在窄屏直接横向滚动
white-space: pre-line 是手机端最稳的兼容方案
后端返回带 \n 的字符串（如用户评论、地址、日志），在手机上既要保留换行又要防溢出，white-space: pre-line 是平衡点：
- 保留源码中的
\n，渲染为真实换行 - 合并多余空格和制表符，避免排版错乱
- 允许在容器右边界自动折行，适配各种屏幕宽度
- 兼容 iOS 12+、Android Chrome 70+，比
pre-wrap更少出现首尾空格残留问题
示例：
<div style="white-space: pre-line; max-width: 100%; word-break: keep-all;"> 北京市朝阳区建国路8号 SOHO现代城A座1208室 邮编: 100022 </div>
超长无空格字符串（URL/手机号/中文长串）必须加 overflow-wrap
手机屏幕窄，遇到 https://example.com/very/long/path/with/no/spaces 或一整段中文“上海市静安区南京西路1266号恒隆广场办公楼38层”，仅靠 white-space 无效——浏览器默认只在空格、标点、连字符处断行。
必须配合：
-
overflow-wrap: break-word（W3C 标准名，优先用）或word-wrap: break-word（IE 兼容） -
max-width: 100%或具体像素值（如width: 300px），否则无折行基准 - 若父容器是 Flex，请确保该文本元素设置了
min-width: 0
别碰 word-break: break-all：中文里会把“微信”切成“微”+“信”，阅读体验崩坏。
慎用
，它在响应式场景下容易错位
<br> 是语义固定换行，适合地址、诗歌这类结构不变的内容。但在手机端：
- 横屏/竖屏切换时，原本“刚好两行”的布局可能变成三行，
<br>反而制造多余空行 - 配合
font-size: clamp()或 viewport 缩放时，<br>位置无法自适应 - 屏幕阅读器会把它读作“换行”，连续多个
<br>造成语音中断
真正需要动态控制换行的地方，应该交给 CSS：white-space + overflow-wrap 才是响应式的底层逻辑。
复杂点在于：同一段文本里可能混合换行需求——既有用户输入的 \n，又有长 URL，还有中英文混排。这时候不能只靠一个属性，得组合用，且顺序不能错：先让 white-space 处理空白逻辑，再让 overflow-wrap 处理长词断行，最后用 min-width: 0 解除 Flex 锁死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
