HTML中换行需用标签或CSS的white-space属性，因浏览器会压缩连续空白符；是自闭合标签，不可写成；动态内容含\n时须用pre-line或转为处理。
HTML 中换行用
HTML 会把连续的空白符（空格、制表符、换行）全部压缩成一个空格，所以直接在源码里敲回车，页面上不会断行。想强制折行，得用
常见错误现象：
写成这样：
这是一行文字
这是第二行
结果还是显示为“这是一行文字 这是第二行”（中间一个空格），因为换行被忽略，br 又没写对（漏了尖括号或斜杠）。
-
- 放在文字中间即可，比如：
第一行
第二行 - 别用多个
margin或
用 CSS 的 white-space 控制换行行为
如果一整段文本里有自然换行符（比如从接口返回带 \n 的字符串），但你想让它按原样显示，
通吃客零食网整站 for Shopex
下载
第一步】：将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式，可以查看：(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】：在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】：登录后台，工具箱里恢复数据管理后台是url/sho
立即学习“前端免费学习笔记（深入）”；
关键点：white-space: pre-line 最常用：保留换行符和空格语义，但自动合并多余空白；white-space: pre-wrap 更激进，连空格和缩进都照搬。
- 场景：后端返回字符串含
\n，前端要原样渲染成多行 - 写法：第一行\n第二行
- 注意：
pre会保留所有空格缩进，可能破坏排版；pre-line更安全 - 兼容性没问题，IE9+ 都支持
避免用 或多次空格强行换行
是不间断空格，它只能占位，不能触发换行。有人误以为多打几个 或空格能“撑”出第二行，其实只是让文字变宽，一旦容器窄了，它照样在不该断的地方断（比如单词中间）。
- 错误示范：
第一行 第二行→ 实际仍是单行，除非宽度溢出才折行 - 真正需要的是结构控制（
white-space） -
React/Vue 等框架里，\n 不会自动换行
JSX 或模板中写 {"第一行\n第二行"}，浏览器照样当空格处理。框架不改变 HTML 的空白规则。
- React 推荐方案：用
white-space: pre-line+{text.replace(/\n/g, '\n')}（确保 \n 存在） - 或者映射成
{text.split('\n').map((line, i) => [i > 0 &&
, line])} - Vue 模板里不能直接写
\n插值，要用v-html或计算属性转义，但注意 XSS 风险
