文字溢出导致容器抖动的根本原因是flex容器内长串文本无法折行，触发重排；解决需组合word-break、min-width:0和max-width:100%，而非单纯截断或隐藏。
文字溢出导致容器抖动的典型现象
输入长单词、Base64字符串或连续中文时，.task_body突然把右侧按钮顶出视口，或者整行列表项高度跳变——这不是动画问题，是浏览器在重排（reflow）：Flex 容器发现子项宽度超限，被迫撑宽自身，连带触发父级尺寸重算，下方元素“啪”地被推下去。
关键在于：默认 word-break: normal 只在空格/标点处换行；无空格长串被当成一个不可折断单元，Flex 优先扩展宽度而非折行。
- 常见错误写法：
white-space: normal（无效）、overflow: hidden（只藏内容，不解决溢出源头） - 误用
text-overflow: ellipsis：它只对单行生效，且要求同时设white-space: nowrap，反而加剧横向撑开 - 给
.task_body直接设width: 200px：响应式失效，小屏直接截断
flex 容器内文字防溢出的最小可行配置
核心不是“限制宽度”，而是让文本主动服从容器约束。必须组合三件事：
-
word-break: break-all或overflow-wrap: break-word：前者强制任意字符间断行（适合日志、ID），后者仅在必要时断（适合普通正文） -
min-width: 0：Flex 子项默认有min-width: auto，会阻止收缩；加这句才能让断行生效 -
max-width: 100%：防止极端窄屏下因字体渲染差异导致微溢出
示例 CSS：
.task_body {
word-break: break-all;
min-width: 0;
max-width: 100%;
}
注意：如果 .task_body 内含 <span></span> 或 <a></a>，需显式继承或单独设置，否则内联元素会绕过断行规则。
中文排版与标点悬挂的兼容处理
纯中文虽天然可断行，但遇到全角标点（如「，」、「。」）在行首时，视觉上会“悬空”——这不是抖动，但影响阅读稳定性。CSS text-rendering: optimizeLegibility 对部分浏览器有效，更可靠的是：
- 确保父容器
font-size和line-height固定（避免输入时字号浮动） - 禁用
letter-spacing动态调整（尤其配合 JS 输入校验时） - 对
<p></p>或<div> 类块级文本容器，加 <code>text-align: justify并配合hyphens: auto（仅现代浏览器支持）若需兼容旧版 Safari，用
word-break: break-all+text-align: left是最稳组合。为什么不能只靠 HTML 层面 truncate
用 JavaScript 截断字符串（如
str.substring(0, 50)）看似简单，但漏掉三个现实问题：- 中英文混排时，50 字符可能只显示 20 个汉字（每个占 2 字节），视觉长度严重失真
- 用户复制粘贴时，截断后的文本丢失原始语义（比如日志 ID 被砍掉后无法定位）
- 服务端返回的富文本（含
<em></em>、<strong></strong>）被 JS 粗暴截断，HTML 结构损坏
真正防抖动，必须从 CSS 渲染层拦截：让浏览器在布局阶段就完成断行，而不是等内容注入后再修补。
