overflow: hidden对、flex子项等元素基本无效，因它们默认缺乏块级上下文；需包裹并配width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis及display: block才生效。
overflow: hidden 为什么经常失效
直接给容器加 overflow: hidden 看似简单，但对 <td>、<code><th>、Flex 子项、内联元素几乎没用——浏览器根本不按标准盒模型处理它们的溢出逻辑。尤其是 Firefox 和 IE11，<code>overflow 在表格单元格上完全被忽略；Chrome 虽部分支持，但遇到长路径或 UUID 仍会撑开列宽。
常见错误现象：
- 给
<td> 加了 <code>overflow: hidden，内容还是把整列拉宽 - Flex 容器里放一段 Base64 字符串，右侧按钮被顶出视口
-
text-overflow: ellipsis不显示省略号，只默默撑开容器 -
white-space: nowrap+overflow: hidden+text-overflow: ellipsis（三者缺一不可） -
display: block（<div> 默认是块级，但若用 <code><span></span>就必须显式设）示例：
<td style="width: 150px;"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;">/api/v1/users/1234567890</div></td>如果内容是无空格长串（如 UUID），优先用
overflow-wrap: break-word直接加在<td> 上：<code><td style="width: 200px; overflow-wrap: break-word;">...</td>。注意：和省略号逻辑冲突，二者只能选其一。Flex 容器内文字防抖动的关键组合
Flex 子项文字溢出导致容器高度跳变、按钮被顶走，本质是重排（reflow）。默认
min-width: auto锁死了最小宽度，文本再长也不折行。必须同时设置三项：
-
word-break: break-all（适合日志、ID 类连续字符）或overflow-wrap: break-word（适合普通正文） -
min-width: 0（解除 Flex 子项默认收缩限制） -
max-width: 100%（防止窄屏下因字体渲染微溢出）
示例：
.task_body { word-break: break-all; min-width: 0; max-width: 100%; }如果
.task_body里含<span></span>或<a></a>，需额外给它们也设min-width: 0，否则内联元素绕过断行规则。绝对定位元素逃逸容器的修复点
用
margin-left: 640px这类大数值硬推元素，缩放或换设备就失效。真正锚定容器要靠定位上下文 + 相对单位。- 父容器必须设
position: relative（否则absolute会往上找最近的相对定位祖先，可能跑到 body 外） - 子元素用
top/right/bottom/left配合百分比或em值，而非像素偏移 - HTML 中 class 属性值必须用双引号包裹：
class="Frame"，否则整个 class 规则不生效 - CSS 中 HEX 颜色必须带
#：background-color: #7B2424，漏掉就当无效声明处理
容易被忽略的是：所有 CSS 声明末尾必须有分号
;，缺失会导致后续样式静默失效，排查时很难发现。 -
根本原因不是 CSS 写错了，而是这些元素默认不具备“可裁剪”的块级上下文。必须先让内容进入一个可控的块级容器，再施加约束。
表格单元格内容截断或折行的正确写法
对 <td> 或 <code><th>，不能直接设 <code>overflow，得套一层 <div> 并补全三要素：
<ul>
<li>
<code>width 或 max-width（必须明确，否则 ellipsis 不知道从哪截）
