text-overflow: ellipsis在双栏布局中失效的主因是容器未满足截断前提：需同时设置width/max-width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis，并对flex子项显式设min-width: 0；grid中避免仅用fr单位，改用minmax(0,1fr)或具体宽度；中英文混排长单词时优先用overflow-wrap: break-word而非强制nowrap。
text-overflow: ellipsis 在双栏布局里经常不生效，不是 CSS 写错了，而是双栏容器（比如 display: flex 或 display: grid）干扰了宽度计算和截断触发条件。
Flex 双栏中文字不截断：min-width: 0 是破局关键
Flex 子项默认 min-width: auto，哪怕你写了 width: 200px、overflow: hidden 和 text-overflow: ellipsis，浏览器也会优先让内容撑开容器——文本根本没“溢出”，省略号自然不会出现。
- 必须给文字所在元素显式加
min-width: 0（不是min-width: auto） - 同时确保它是块级行为：
display: block或display: inline-block（span默认是inline，不满足text-overflow生效前提） - 完整组合缺一不可：
width或max-width+white-space: nowrap+overflow: hidden+text-overflow: ellipsis+min-width: 0 - 若双栏用
flex: 1分配空间，子项又没设min-width: 0，那其他所有样式都白配
Grid 双栏里省略号失效：别依赖 fr 单位设宽
grid-template-columns: 1fr 2fr 这类弹性列宽不会触发 text-overflow，因为 fr 不算“明确宽度”。浏览器无法判断“溢出起点”在哪里。
- 想用省略号，必须给文字容器设具体
width或max-width（如max-width: 300px、width: 80%） - 如果列宽需响应式，可用
minmax(0, 1fr)替代1fr，它能配合min-width: 0触发收缩行为 -
overflow: hidden必须写在文字容器上，不是写在 grid item 外层 wrapper 上 - Grid item 默认是
min-width: 0，但若内部嵌套了 flex 容器，那个子 flex 容器仍需单独处理min-width
双栏含长英文/URL 时，ellipsis 和 break-word 别混用
中英文混排或含 URL 的字段，单靠 white-space: nowrap + text-overflow: ellipsis 很容易被一个长单词（如 /api/v1/users/1234567890）直接撑破容器，导致省略号完全不显示。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 优先用
overflow-wrap: break-word替代white-space: nowrap，它允许在长单词内折行，且不破坏语义 - 若必须显示省略号（比如列表项标题），就得禁用折行：
white-space: nowrap+overflow-wrap: normal，再补全四件套 -
word-break: break-all虽能强制断词，但会把useCallback断成useC，可读性差，仅限技术 ID 类字段 - 表格双栏中更要注意：
<td> 对 <code>overflow支持极差，必须套一层<div> 并设 <code>display: block双栏中按钮或链接文字溢出：别只盯 text-overflow
按钮（
<button></button>）和链接（<a></a>）在双栏里常因默认min-width: auto和内联特性导致截断失败，而且它们本身有交互语义，不能随便改display。- 按钮推荐用
display: inline-flex（保留点击区域和语义）+min-width: 0+ 四件套 - 链接若要截断，建议把文字包进
<span></span>，样式只加在span上，避免影响a的默认行为 - 多行按钮文案（如“确认支付↵含运费”）不适合
-webkit-line-clamp，它在按钮内兼容性差；稳妥做法是固定height+line-height+overflow: hidden - 移动端小屏下，双栏按钮宽度紧张，与其硬截断，不如用媒体查询切到
white-space: normal+word-break: break-word自动换行
真正容易被忽略的是：双栏布局本身不决定截断逻辑，它只是改变了宽度计算上下文。所有“失效”，本质都是某一条前提条件被容器层级悄悄覆盖了——尤其是
min-width和display的隐式继承，查起来费时间，但加对了就立刻见效。 - 按钮推荐用
