alert() 不支持换行和 HTML 标签，因规范要求其仅显示纯文本；实现多行提示须改用带语义化结构的 DOM 模态框，并注意可访问性。
原生 alert() 不支持 HTML 标签、换行符或样式，所有换行符 \n 在大多数浏览器中会被忽略或显示为空格——这不是 bug，是规范行为。
为什么 alert("第一行\n第二行") 不换行？
HTML 规范明确要求 alert() 显示纯文本，浏览器实现必须将传入字符串视为无格式内容。即使你写 "Line1\nLine2"，Chrome、Firefox、Safari 都会把它压成一行（部分旧版 IE 曾支持 \n，但已废弃）。
常见错误现象：
- 在 JS 中用
\n拼接多行字符串，结果弹窗里全是连在一起的字 - 试图在
alert()里写<br>或<p></p>，结果直接显示为字面量 - 用
String.fromCharCode(10)或String.raw尝试绕过，依然无效
替代方案：用自定义模态框模拟多行提示
要真正实现分段、加粗、缩进、不同字号或多行对齐，必须放弃 alert()，改用 DOM 模态框。关键不是“怎么让 alert 换行”，而是“怎么用最少代码实现等效体验”。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用一个
<div class="modal"> 包裹内容，内部用 <code><p></p>或<div> 分段，每段独立控制样式 <li>通过 <code>textContent插入纯文本，或innerHTML插入带标签的富文本（注意 XSS 风险） - 给模态框加
display: flex; flex-direction: column;+gap: 0.5em;，自然形成清晰段距 - 必须手动捕获
Escape键和点击遮罩层关闭逻辑，alert()的阻塞行为无法复制
示例最小结构：
<div id="custom-alert" class="modal">
<div class="modal-overlay"></div>
<div class="modal-content">
<p>操作即将执行</p>
<p><strong>请确认以下信息</strong>：</p>
<p>• 用户ID：U12345</p>
<p>• 生效时间：2026-10-28 12:00</p>
</div>
</div>
表格单元格里触发的警告，怎么保持上下文可读？
当警告来自表格某一行（比如点击“删除”按钮），用户需要看清当前行数据。硬把整行内容塞进单行 alert() 会导致信息溢出、无法阅读。
推荐做法：
- 不要拼接长字符串传给
alert()；提取关键字段，用innerHTML渲染到模态框内多个<p></p>中 - 利用
data-属性预存结构化信息，例如<button data-user-id="U12345" data-name="张三">删除</button> - 在模态框中用
document.querySelector('[data-user-id]').dataset动态注入，避免字符串拼接错误 - 若需展示原始长文本（如日志片段），给对应
<p></p>加white-space: pre-line;和max-height: 120px; overflow-y: auto;
最易被忽略的一点：自定义弹窗不自动获得焦点管理与屏幕阅读器支持。如果项目需满足 WCAG，必须手动添加 aria-modal="true"、role="dialog"、inert 属性及焦点锁逻辑——否则键盘用户可能卡在背景内容里。
