white-space: pre-wrap 是移动端长文本最稳妥的换行起点，但需配合 min-width: 0、max-width 约束及避免框架覆盖 nowrap；单行省略须同时满足 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 和 display: block（iOS 必需）。
white-space: pre-wrap 是移动端长文本最稳妥的换行起点，但仅靠它不够；text-overflow: ellipsis 在 iOS Safari 中必须搭配 display: block 才可靠生效，否则静默失效。
移动端长文本不换行？先查 white-space 是否被框架覆盖
很多 UI 框架（如 Vant、NutUI）或全局重置样式会悄悄给 <td>、<code><span></span> 甚至 <p></p> 加 white-space: nowrap，尤其在按钮、标签、表格单元格里。一旦触发，overflow-wrap: break-word 和 word-break: break-all 全部失效。
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用浏览器开发者工具检查目标元素的
Computed样式，确认white-space真实值是normal或pre-wrap，不是nowrap - 显式覆盖：
white-space: normal（适合纯正文）或white-space: pre-wrap（适合带用户回车的评论、日志） - 避免在
<button></button>或<nav></nav>内直接放长文本——它们默认white-space: nowrap，改起来成本高，应换容器
overflow-wrap: break-word 为何在 iOS 上有时不生效
这不是 bug，而是渲染链断点：当父容器是 display: flex 或 display: grid，且子元素（如 <div> 或 <code><td>）没设 <code>min-width: 0 时，iOS WebKit 会锁死内容收缩，导致换行逻辑被跳过。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 对文本容器加
min-width: 0（不是父容器，不是<table>，就是那个装文字的 <code><div> 或 <code><td>） <li>必须配宽度约束：<code>max-width: 100%或具体值（如max-width: 280px），否则overflow-wrap不知道“在哪停” - 慎用
word-break: break-all：它在 iOS 上容易把 URL 切成https:/+/api.exa…，链接不可点击 -
width或max-width有明确值（100%可以，auto不行） -
white-space: nowrap（注意：和换行属性互斥，不能和pre-wrap或overflow-wrap共存） -
overflow: hidden（visible或scroll都会让省略号消失） - 额外补丁（iOS Safari 15.4 之前必需）：
display: block或display: -webkit-box - 必须配合
display: -webkit-box和-webkit-box-orient: vertical -
overflow: hidden不可省略，否则最后一行可能撑开容器 - 不要指望
line-clamp和white-space: pre-wrap混用——前者要求内容“流式排布”，后者保留原始换行符，冲突会导致截断位置错乱 - 若文本含用户输入的
\n，先用 JS 替换为<br>或用white-space: pre-line，再上line-clamp
单行截断显示 … 在移动端的三个硬条件
text-overflow: ellipsis 在移动端比桌面端更脆弱。漏掉任一条件，就只显示溢出，不显示省略号。
必须同时满足：
示例写法：<div style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;">超长标题文本</div>
多行截断在移动端仍靠 -webkit-line-clamp
目前没有标准 CSS 多行省略方案，-webkit-line-clamp 虽然是非标准属性，但在所有主流移动端浏览器（Chrome for Android、Safari、微信 WebView）中稳定支持。
关键点：
最容易被忽略的是 min-width: 0 在 Flex 嵌套下的强制作用，以及 iOS 对 text-overflow 的 display 类型敏感性——这两个点不处理，其他样式全白调。
