text-truncate不生效八成漏了三样：容器无明确宽度、元素非block/inline-block显示模式、未限制单行（white-space: nowrap虽已包含，但display和width缺失导致其失效）。

text-truncate不生效，八成漏了这三样

加了 text-truncate 却没省略号？不是类写错了，而是它只封装了三条 CSS： overflow: hidden、text-overflow: ellipsis、white-space: nowrap —— 但**不设宽度、不改显示模式、不锁单行容器**，这三条就全白搭。

必须同时满足：

• display 是 block 或 inline-block（span、td、a 这类默认行内或 table-cell 的元素直接加会失效）
• 容器有明确的 width 或 max-width（col 类没写具体断点如 col-6，或只写 col，宽度就不确定）
• 不能被父容器的 flex 行为“撑开”（比如子项没设 min-w-0，或父容器设了 flex-shrink: 0）

Flex 布局里 text-truncate 失效的解法

在 row + col 或自定义 class="d-flex" 下，子元素即使写了 text-truncate，也常因 flex 默认不收缩而溢出。这不是 bug，是 flex 的行为逻辑。

关键不是“加更多 class”，而是让子项真正能压缩：

• 给文字容器加 min-w-0（Bootstrap 5.3+）或 style="min-width: 0"（旧版）——这是触发收缩的开关
• 搭配 flex-1 或 w-100，确保它占满可用空间后再截断
• 检查父容器是否设了 flex-shrink: 0；设了就得去掉，否则子项宽度锁定，overflow: hidden 彻底失效
• 避免套多一层无意义 div，比如

  标题

  ，容易打断 flex flow 导致 w-100 失效

表格单元格（）里怎么用 text-truncate

默认是 display: table-cell，而 text-overflow: ellipsis 对它完全无效——连加 d-block 都不够，因为表格布局本身会忽略常规宽度控制。

必须组合四要素：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 给 加 table-layout: fixed（Bootstrap 不自带，需额外加 style="table-layout: fixed" 或自定义类）
  给

  或

  设显式宽度，如 w-25、max-w-32 或 style="width: 120px" 给单元格加 d-block（或 style="display: block"）强制块级 再加 text-truncate，三件套才起效 漏掉 table-layout: fixed 是最常见原因：没有它，列宽由内容决定，CSS 宽度声明会被无视。 想截两行？别碰 text-truncate text-truncate 和多行截断互斥。它强制 white-space: nowrap，而两行需要换行 + 行数限制，机制上就冲突——硬加只会让第一行被切掉一半，或干脆没反应。 要截两行，必须用 WebKit 方案： 加自定义类（如 text-truncate-2），内容含：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden 不能设 height，否则截断位置不准；可配 max-height（比如 max-h-12）辅助视觉对齐 Firefox 支持 -webkit-line-clamp 从 73 版起，但旧版本仍需 JS 回退（按滚动高度测高后截字符串） 别和 text-truncate 混用，CSS 层叠会覆盖掉关键声明 中英文混排、emoji、全角标点会让实际截断位置偏移一两个字符——这不是 bug，是浏览器字体度量和 Unicode 宽度计算的自然结果，调试时别死磕像素级对齐。