移动端空格不折行主因是white-space:nowrap被继承或误加；应检查computed styles，用white-space:pre-line处理换行，配合overflow-wrap:break-word断长词，并设min-width:0防flex锁死。
移动端空格显示异常，90% 是 white-space: nowrap 被继承或误加，而不是空格本身没写对；真正要解决的不是“怎么打空格”，而是“怎么让空格参与换行”。
为什么手机上空格像消失了？
PC 浏览器对空白符较宽容，但 iOS Safari 和多数 Android WebView 会严格继承父级 white-space 值。一旦某个外层容器（比如 .van-button、.am-navbar-title 或 Flex 容器）设了 nowrap，子元素即使没显式声明，也会锁死换行能力——空格还在，只是浏览器拒绝在它那里折行。
- 检查开发者工具的 Computed 样式，重点看
white-space是否为nowrap - 常见陷阱：UI 框架全局重置了按钮/标题样式，而你把文本塞进了那个组件内部
- Flex 容器未设
min-width: 0，导致子元素无法收缩，间接压制换行触发
用 white-space: pre-line 处理带换行的用户文本
后端返回含 \n 的地址、评论、日志时，pre-line 是最稳选择：它合并连续空格（避免排版毛刺），保留换行符，并允许在单词间正常折行。
- 兼容 iOS 12+、Android Chrome 70+，比
pre-wrap更少出现首尾空格残留 - 别在
body或全局组件上滥用——按钮文字也会跟着换行，破坏 UI - 配合
overflow-wrap: break-word防止超长无空格串（如 URL）横向溢出
<div style="white-space: pre-line; overflow-wrap: break-word; max-width: 100%;"> 北京市朝阳区建国路8号 SOHO现代城A座1208室 邮编: 100022 </div>
超长无空格字符串必须单独处理
纯中文长段落（如“上海市静安区南京西路1266号恒隆广场办公楼38层”）或 URL，仅靠 white-space 无效——浏览器默认只在空格、标点、连字符处断行。
-
overflow-wrap: break-word是必加项，强制在任意字符间断行 - 避免用
word-break: break-all：它会在英文单词中间硬切，可读性差 - 若需保留语义断点（如中英文混排），优先用
overflow-wrap: anywhere（Chrome 83+/Firefox 73+ 支持）
别用 堆砌空格来“对齐”
是语义型不可断行空格，适合防拆分（如 “Fig. 5”），不是排版工具。
- 多个
- 屏幕阅读器会逐个朗读“不间断空格”，影响无障碍体验
- 想控制间距？用
padding、margin或letter-spacing；想缩进段落？用text-indent
真正难的不是加哪条 CSS，而是定位哪个父容器偷偷加了 nowrap——它往往藏在第三方组件源码或全局样式表里，不翻 Computed 样式树根本看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
