手机端空格不折行主因是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;">&lt;/code&gt; 包裹普通文本，等宽字体 + 不折行，在窄屏直接横向滚动&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;white-space: pre-line 是手机端最稳的兼容方案&lt;/H3&gt; &lt;p&gt;后端返回带 &lt;code&gt;\n&lt;/code&gt; 的字符串（如用户评论、地址、日志），在手机上既要保留换行又要防溢出，&lt;code&gt;white-space: pre-line&lt;/code&gt; 是平衡点：&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;ul&gt; &lt;li&gt;保留源码中的 &lt;code&gt;\n&lt;/code&gt;，渲染为真实换行&lt;/li&gt; &lt;li&gt;合并多余空格和制表符，避免排版错乱&lt;/li&gt; &lt;li&gt;允许在容器右边界自动折行，适配各种屏幕宽度&lt;/li&gt; &lt;li&gt;兼容 iOS 12+、Android Chrome 70+，比 &lt;code&gt;pre-wrap&lt;/code&gt; 更少出现首尾空格残留问题&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;示例：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill5493&quot; title=&quot;html-to-pptx&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg&quot; alt=&quot;html-to-pptx&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill5493&quot; title=&quot;html-to-pptx&quot;&gt;html-to-pptx&lt;/a&gt; &lt;p&gt;将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill5493&quot; title=&quot;html-to-pptx&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;pre class='brush:php;toolbar:false;'&gt;<div style=&quot;white-space: pre-line; max-width: 100%; word-break: keep-all;&quot;> 北京市朝阳区建国路8号 SOHO现代城A座1208室 邮编: 100022 </div></pre> <h3>超长无空格字符串（URL/手机号/中文长串）必须加 overflow-wrap</h3> <p>手机屏幕窄，遇到 <code>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> 是语义固定换行，适合地址、诗歌这类结构不变的内容。但在手机端：

  • 横屏/竖屏切换时，原本“刚好两行”的布局可能变成三行，<br> 反而制造多余空行
  • 配合 font-size: clamp() 或 viewport 缩放时，<br> 位置无法自适应
  • 屏幕阅读器会把它读作“换行”，连续多个 <br> 造成语音中断

  真正需要动态控制换行的地方，应该交给 CSS：white-space + overflow-wrap 才是响应式的底层逻辑。

  复杂点在于：同一段文本里可能混合换行需求——既有用户输入的 \n，又有长 URL，还有中英文混排。这时候不能只靠一个属性，得组合用，且顺序不能错：先让 white-space 处理空白逻辑，再让 overflow-wrap 处理长词断行，最后用 min-width: 0 解除 Flex 锁死。