原生 alert() 不支持 HTML/CSS 和自动换行，因其是操作系统级模态窗口；替代方案是使用自定义 modal，设置 max-width、white-space: pre-wrap、overflow-wrap: break-word 及 min-width: 0，并注意换行符归一化、内容设置方式、z-index、可访问性和异步时序问题。
原生 alert() 对话框不支持任何 HTML 或 CSS，长文本在其中必然硬截断或横向滚动，无法自动换行——这不是样式问题，是浏览器 API 的硬性限制。
为什么不能给 alert() 加 CSS 或换行符
所有现代浏览器（Chrome、Firefox、Safari、Edge）的 alert() 都是操作系统级模态窗口，完全脱离页面 DOM 和样式树。你传入的字符串里加 \n，部分浏览器（如 Chrome）会显示为换行，但 Safari 和旧版 Edge 可能直接忽略；加
<br>或内联样式会被当纯文本渲染，毫无作用。
-
alert("第一行\n第二行")在 Chrome 中可能换行，在 Safari 中大概率连成一行 - 试图用
white-space: pre-wrap或overflow-wrap: break-word完全无效——alert()根本不解析 CSS - 宽度不可控：对话框尺寸由系统决定，响应式、移动端、高 DPI 下表现更不可预测
替代方案：用自定义 modal 实现可控换行
真正能控制换行的唯一路径，是放弃 alert()，改用基于 <div> 的轻量 modal，并用 CSS 精确约束行为。<ul>
<li>容器设固定最大宽度（如 <code>max-width: 400px），避免在窄屏下撑满
white-space: pre-wrap：保留用户输入的 \n，同时允许长行在边界处折行overflow-wrap: break-word，否则仍会溢出min-width: 0，否则换行逻辑被 flex 默认 min-width: auto 锁死.alert-modal {
max-width: 400px;
padding: 16px;
background: #fff;
border: 1px solid #ddd;
}
.alert-modal .message {
white-space: pre-wrap;
overflow-wrap: break-word;
min-width: 0; /* Flex 子项必须加 */
}从 alert() 迁移时容易踩的坑
很多人以为“只是换个弹窗”，结果上线后发现换行错乱、中文被切、移动端文字消失——问题往往藏在细节里。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 服务端返回带
\r\n的消息？前端 JS 要先统一归一化为\n：msg.replace(/\r\n/g, '\n')，否则pre-wrap不识别 Windows 换行 - 用
textContent设置内容？它会把\n当普通字符，不触发换行；必须用innerText或设置white-space后用textContent才生效 - modal 用
position: fixed但没加z-index？可能被其他组件遮挡，尤其在 Vue/React 动态渲染场景下 - 没处理键盘焦点和
Esc关闭？可访问性（a11y）直接不达标，不是“能用就行”的小问题
最常被忽略的一点：原生 alert() 会阻塞 JS 执行，而自定义 modal 是异步的。如果你代码里有 alert() 后紧跟状态更新（比如 loading = false），迁移时必须显式用 Promise 或回调对齐时序——否则 UI 会卡在 loading 状态不动。
