想在一个提示框里换行，是前端最常被问到的琐事之一。答案分两半：alert() 里的 \n 能不能生效，取决于浏览器对纯文本对话框的处理；而页面里换行不显示，根本不是字符串问题，是 HTML 的空白折叠规则。本文依据 MDN 与 PHP 手册原文把两件事分开讲清。

一、alert 的官方定义：它是同步阻塞的

MDN 的 Window: alert() 页给出的定义原文是："instructs the browser to display a dialog with an optional message, and to wait until the user dismisses the dialog"。签名是 window.alert(message)，参数说明为 "A string you want to display in the alert dialog, or, alternatively, an object that..."（对象会被转换）。官方示例两种写法都合法：window.alert("Hello world!") 与 alert("Hello world!")。

用法边界也写在同一页："The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message." 也就是说它只用于"告知后确认"，需要输入或选择请用 prompt/confirm 或自建弹窗。同时注意 "wait until the user dismisses"：它会阻塞主线程，后续代码与渲染都停下。

二、alert 里的换行怎么写

alert() 接收的是纯文本，所以换行只能用 \n 转义符，写 <br> 会原样显示成尖括号：

alert("第一行\n第二行");
alert(`第一行
第二行`);（模板字符串里直接回车，效果等同 \n）

需要知道的两点现实情况：一是各家浏览器对连续换行、超长行的渲染不一致，老版本 Safari 对 \n 的处理曾不如 Chrome 稳定；二是在跨域 iframe 内调用 alert，浏览器出于防钓鱼会改写内容，把消息替换为来源文档的域名提示，此时你的换行毫无意义。因此 alert 只适合调试与临时提醒，正式提示应自建 DOM 弹窗。

三、页面里换行不显示：空白折叠才是原因

把带 \n 的文本直接插进 HTML，浏览器会把连续空白折叠成一个空格，换行自然消失。这是 CSS 的 white-space 规则。MDN white-space 页列出的取值包括 normal、pre-wrap、pre-line、nowrap、break-spaces，以及新式的 white-space-collapse 与 text-wrap-mode 简写形式；该特性标注为已在 2015 年 7 月起广泛可用。针对换行的选择很明确：

• white-space: pre-line：折叠空格但保留换行，最适合展示多行纯文本。
• white-space: pre-wrap：保留空格与换行并自动折行，适合日志、代码片段。
• normal：两者都折叠，即默认行为。

另一个办法是把 \n 转成 <br> 再插入，但那样就掺入了 HTML，若文本含用户输入必须转义，否则出现 XSS。

四、服务端已有的文本怎么转

PHP 侧有专门函数。nl2br 手册页定义原文是 "Inserts HTML line breaks before all newlines in a string"，即在每个换行前插入 <br />，参数是输入的字符串，返回处理后的新字符串。它支持 \r\n、\r、\n 三种换行，因此 Windows 文本也能正确处理。要注意的是：nl2br 保留原换行，输出里既有 <br> 也有换行符，配合 pre 类样式会看到双倍行距。

五、弹窗换行的推荐结构

正式场景建议用原生 <dialog> 或 div 弹窗，消息区写成：

<div id="msg" style="white-space:pre-wrap"></div>

赋值时用 el.textContent = msg——textContent 写入的是纯文本，不解析 HTML，因此 \n 会原样保留并被 pre-wrap 渲染成换行，同时天然免疫 XSS。这是"既能换行又安全"的最小组合。

六、常见问题 FAQ

问：alert 弹了太多次，出现"禁止再创建对话框"？
答：浏览器对高频 alert 有防护，勾选后本页 alert 会被静默忽略，这是设计行为。

问：alert 能加粗变色吗？
答：不能，它不受页面 CSS 影响，需要样式就自建弹窗。

问：textarea 里的换行提交后消失？
答：存储时是 \n，展示端要么用 pre-line，要么后端用 nl2br 转换。

七、总结

换行的正确做法是按输出位置选择手段：alert() 是纯文本且同步阻塞，只能写 \n（模板字符串换行等价），跨域 iframe 内其消息会被浏览器改写；页面显示多行文本请给容器加 white-space: pre-line 或 pre-wrap，默认 normal 会折叠空白；服务端历史文本可用 PHP nl2br 在每个换行前插入 <br />，但注意它保留原换行会双倍行距；正式弹窗用 textContent 配合 pre-wrap，换行与安全一次解决。

• javascript
• css
• 换行
• alert