alert()不支持HTML标签和可靠换行，\n行为因平台而异且不可控；真正换行需用自定义模态框或UI组件库的Modal/Message。
JavaScript 的 alert() 本身不支持 HTML 标签
直接在 alert() 字符串里写 <br> 或换行符 \n，浏览器会原样显示为文字或忽略换行——这不是 bug，是规范行为。所有主流浏览器（Chrome、Firefox、Safari）都把 alert() 当作纯文本弹窗，\n 在部分系统（如 Windows）可能被渲染成换行，但在 macOS 和某些移动端则完全不生效，不可靠。
\n 能不能用？看场景和平台
如果只是内部工具、仅在 Windows Chrome 下运行，且接受兼容性风险，可以尝试 \n：
alert("第一行\n第二行\n第三行");
但要注意：
-
\n不是标准保证行为，Safari 通常无视它 - 即使显示换行，字体、行高、宽度都不可控，无法对齐或加粗
- 无法嵌入链接、颜色、按钮等任何交互元素
- 用户无法选中、复制多行文本（部分浏览器限制）
真正可控的换行方案：自定义模态框替代 alert()
业务中只要求“看起来像警告框+支持换行”，就该放弃 alert()。用一个 <div> 模拟更稳妥：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class="brush:php;toolbar:false;"><div id="custom-alert" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border:1px solid #ccc; padding:20px; z-index:9999;">
<p>操作已完成</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>请检查邮箱确认链接</p>
<button onclick="document.getElementById('custom-alert').style.display='none'">确定</button>
</div></pre>
<p>关键点：</p>
<ul>
<li>用 <code><p></p> 或 <br> 实现语义化换行，样式完全可控
z-index 和遮罩层（可选）避免底层交互Modal 或 Message 更省事为什么不用 confirm() 或 prompt()？
它们和 alert() 同属 window 对话框 API，同样不解析 HTML、对 \n 支持不一致。尤其是 prompt() 输入框会把 \n 显示为空格，confirm() 的按钮文案还不能改。想换行+交互，唯一出路就是自己画 DOM。
真实项目里，没人真靠 alert() 做用户提示——不是不会写 \n，而是它连基础排版自由都没有。换行只是表象，背后是控制权问题。
