移动端段落折行失效主因是容器、css与内容未协同：需设明确宽度（如max-width:100%）、flex项加min-width:0、禁用white-space:nowrap，并搭配overflow-wrap:break-word处理长单词。
移动端段落文字折行失效，通常不是因为没写 <p></p>，而是容器、CSS 和内容三者没协同好。关键不在“要不要换行”，而在“浏览器有没有机会、有没有依据去换行”。
确保容器有明确宽度约束
段落默认是块级元素，但若父容器没有宽度限制（比如 flex 项目未设 min-width: 0，或 grid 单元格用了固定 150px），它会优先撑宽，而不是折行。
- 给
<p></p>或其父容器加max-width: 100%或width: 100vw，尤其在 flex/grid 布局中 - 如果段落嵌在 flex 容器里，记得给它加
min-width: 0，解除 flex item 默认的最小尺寸保护 - 避免父级设置
white-space: nowrap——这一条会直接禁用所有自动换行
用对 white-space 和 overflow-wrap
white-space: normal 是默认值，但容易被框架样式或子元素覆盖；而仅靠它还不够，长单词（如 URL、驼峰 API 名）仍可能溢出。
- 必须搭配
overflow-wrap: break-word（推荐）或word-break: break-word，让浏览器在必要时断开超长词 - 慎用
word-break: break-all：它会暴力切英文单词，影响可读性；keep-all则完全禁止断英文，移动端慎用 - 若需保留用户输入的回车换行（如评论区），用
white-space: pre-wrap，它既认\n，也支持自动折行
处理特殊长内容：URL 和代码片段
纯字母数字串（如 https://api.example.com/v2/users）没有空格，浏览器找不到自然断点，overflow-wrap: break-word 才是解药。
- 不要依赖手动插
<wbr></wbr>来救急——它只是建议，且只在符合语言逻辑的位置（如/、.、大写字母前）才被采纳 - 更稳妥的做法：统一加
overflow-wrap: break-word+max-width: 100%，让浏览器自己判断何时断 - 若内容含大量代码或路径，可额外加
font-family: monospace提升可读性，但别因此忽略换行控制
响应式微调：小屏下更宽松的断行策略
桌面端能容纳的单行文本，在手机上大概率要折成两行甚至三行。与其硬撑，不如主动适配。
- 用媒体查询降低断行门槛：小屏下加
hyphens: auto（配合lang="zh"或lang="en"），对中英文做连字符辅助断行 - 对标题类段落，可设
white-space: normal+text-overflow: ellipsis（需配合overflow: hidden和display: block），防极端长度破坏布局 - 避免在
<p></p>里嵌套<span></span>并设white-space: nowrap——局部禁用会拖垮整体折行逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
