在 flex 布局中，当 `.task_body` 等文本容器内容过长时，若未合理设置文本截断与换行策略，极易导致容器溢出、触发水平滚动条。本文提供基于 `word-break: break-all` 的可靠解决方案，并详解其原理、适用场景与替代方案。
在构建待办事项（To-Do List）等卡片式列表时，常使用 Flex 布局组织标题（.task_title）、正文（.task_body）和操作区（.edit_delete）。但当用户输入超长无空格文本（如连续字母、Base64 字符串或日志片段）时，浏览器默认不会主动换行——即使父容器设置了固定宽度（如 width: 50%），文本仍会强行横向延伸，突破 Flex 容器边界，最终引发意外的水平滚动条或布局错位。
根本原因在于：Flex 项（flex item）默认具有 min-width: auto 行为，会阻止内容被压缩换行；而纯英文/无空格文本缺乏自然断点，white-space: normal（默认值）也无法生效。
✅ 正确解法是显式控制文本换行行为。推荐为 .task_body 添加以下 CSS：
.task_body {
word-break: break-all;
}该声明强制浏览器在任意字符间断行（包括字母、数字之间），确保超长文本严格约束在容器宽度内，避免溢出。配合你已有的 Flex 结构（li { display: flex; justify-content: space-between; width: 50%; }），效果立竿见影：
- ✅ 容器不再横向撑开
- ✅ 不触发 <body> 或父级的水平滚动条
- ✅ 文本自动折行，保持垂直阅读流
- ✅ 兼容所有现代浏览器（Chrome 1+, Firefox 15+, Safari 3.1+, Edge 12+）
⚠️ 注意事项：
- word-break: break-all 适用于技术性内容（如 ID、哈希值、日志片段），但对普通中文/英文段落可能造成不自然断字（如 “wel-come”）。若需更语义化换行，可改用：
.task_body { word-break: break-word; /* 已废弃，不推荐 */ overflow-wrap: break-word; /* 推荐：优先尝试单词间断行，失败再强制断字符 */ hyphens: auto; /* 可选：启用连字符，提升可读性（需语言属性支持） */ } - 务必确保 .task_body 未设置 white-space: nowrap，否则 word-break 将失效。
- 若需同时限制行数并显示省略号（ellipsis），需额外结合 display: -webkit-box 和 -webkit-line-clamp，但此时 break-all 不兼容，应按需取舍。
? 总结：解决 Flex 中长文本溢出的核心逻辑是——放弃“依赖空格换行”的假设，主动声明断行策略。word-break: break-all 是最直接、兼容性最佳的兜底方案；生产环境建议结合内容类型选择 overflow-wrap: break-word 并辅以 max-width 和 min-width: 0（重置 flex item 默认最小宽约束），实现稳健、可维护的响应式文本渲染。
