white-space: nowrap 单独使用基本无效，必须结合容器宽度、子项尺寸约束及布局模式（如Flex中设flex-shrink: 0、Grid中用明确轨道宽度、Float中配width、Table中加table-layout: fixed）才能真正生效。
white-space: nowrap 单独加在双栏容器或子元素上基本无效——双栏布局本身不决定换行，真正起作用的是容器宽度、子项尺寸约束和渲染上下文。必须结合具体实现方式（Flex / CSS Grid / Float / Table）来处理，不能一概而论。
Flex双栏中文字强制单行却仍换行？检查 flex-shrink
Flex 容器里两个子项并排，但文字还是折了，大概率不是 white-space: nowrap 没写，而是子项被压缩了：
-
flex-shrink: 1是默认值，当容器空间不足时，即使写了white-space: nowrap，浏览器也会先缩窄元素再让内容溢出或换行 - 给文字所在栏加
flex-shrink: 0，阻止它被压缩，white-space: nowrap才有生效前提 - 如果另一栏是横线或占位符，记得给它设
flex: 1或flex-grow: 1，避免抢空间 - 别用
min-width代替flex-shrink: 0——它只防缩小，不防 flex 布局的主动收缩逻辑
CSS Grid双栏下 white-space: nowrap 失效？确认轨道定义
Grid 双栏常见写法是 grid-template-columns: 1fr 2fr，但这种比例定义在内容超长时照样会触发换行：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
white-space: nowrap要生效，目标单元格必须有“可测量的宽度边界”，而1fr是弹性分配，不是固定像素，浏览器无法判断溢出点 - 改用明确尺寸：比如
grid-template-columns: 200px 1fr，或配合minmax(200px, max-content) - 若需响应式，优先用
minmax(min-width, max-content)而非纯fr单位，否则长文本会把整列撑宽甚至破坏布局 - 避免在 grid item 内嵌套
div再设white-space——直接设在 grid item 上更可靠
Float双栏中文字跑出容器？overflow 和 width 必须配对
Float 布局虽旧，但仍有遗留系统在用；这里换行问题常表现为文字溢出右栏或压垮父容器：
- 仅给浮动子项加
white-space: nowrap不够，必须同时设width（如width: 48%），否则浮动项宽度由内容撑开，nowrap 就失去约束对象 - 父容器要清除浮动（
overflow: hidden或伪元素），否则高度塌陷，后续内容会上移覆盖 - 若想截断+省略号，得额外加
overflow: hidden+text-overflow: ellipsis，且确保该元素是块级（display: block） - 注意 IE 兼容性：
text-overflow: ellipsis在 IE 中要求元素有确切width和overflow: hidden，缺一不可
双栏表格布局（<table>）禁换行最难？<code>table-layout: fixed 是生死线
用表格做双栏（比如左右两列布局）时，white-space: nowrap 几乎必然失效，除非你主动打破表格默认行为：
立即学习“前端免费学习笔记（深入）”；
- 必须给
<table> 加 <code>table-layout: fixed，否则列宽动态计算，nowrap根本没参考基准 -
<col>或对应<td> 必须设显式 <code>width（如width: 200px），百分比也行，但不能只靠min-width <td> 得加 <code>display: block—— 默认display: table-cell对white-space支持极弱- 若该
<td> 是 <code>contenteditable="true"，JS 必须拦截Enter和粘贴事件，否则用户一按回车就插入<div>，CSS 彻底失效 真正容易被忽略的是：双栏只是视觉结构，换行控制永远落在**具体容器的尺寸约束 + 渲染模式 + 内容语义**三者交点上。写十行 <code>white-space: nowrap不如查一眼 computed styles 里 width 和 display 到底是什么。
