本文讲解如何在 flex 容器中正确处理超长纯字母/无空格文本（如连续 aaaaa...），通过 word-break: break-all 实现自动断行、避免容器溢出和水平滚动条，确保响应式布局稳定。
在构建待办任务列表（To-Do List）等基于 Flex 布局的组件时，一个常见但易被忽视的问题是：当 .task_body 或 .task_title 中包含大量无空格字符（例如由用户粘贴的长 Base64 字符串、日志片段或测试用的连续字母 aaaaaaaa...）时，浏览器默认不会主动换行——即使容器设置了固定宽度（如 width: 50%），文本仍会横向撑开父级 Flex 项（<li>），导致内容溢出、触发水平滚动条，甚至破坏 justify-content: space-between 的对齐逻辑。
根本原因在于：CSS 的默认换行规则（word-break: normal）仅在空格、连字符或 Unicode 断字点处换行；而纯字母/数字长串属于「不可断单词（unbreakable word）」，Flex 容器为维持其内部元素完整性，会优先扩展自身宽度而非折行。
✅ 正确解法是显式启用强制断行：
.task_body {
word-break: break-all;
}该声明指示浏览器在任意字符间插入换行点，确保文本严格限制在容器宽度内。配合你已有的 Flex 结构，效果立竿见影：
<li>
<div class="task_title">aaaaaaaaaaaaaaaaaaaa</div>
<div class="task_body">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="edit_delete">
<a href="/task/9/edit/">Edit</a>
<a href="/task/9/delete/">Delete</a>
</div>
</li>? 补充建议：若需兼顾可读性（避免在单词中间生硬截断英文），可改用 overflow-wrap: break-word（旧称 word-wrap: break-word），它仅在必要时（即单个单词超宽）才在字符间断行；而 word-break: break-all 更激进，适用于明确需要「绝对防溢出」的场景（如日志、ID 显示）。
⚠️ 注意事项：
- 不要依赖 white-space: normal（默认值）或 white-space: pre-wrap —— 它们无法解决无空格长串问题；
- 避免对 Flex 子项（如 .task_body）设置 min-width: 0 以外的 min-width，否则可能阻碍 Flex 的收缩行为；
- 若 .task_body 内含内联元素（如 <span> 或 <a>），需确保这些元素也继承 word-break: break-all，或为其单独设置；
- 在移动端，建议叠加 max-width: 100% 防止极端情况下的视口溢出。
最终，只需一行 CSS 即可彻底解决 Flex 下长文本溢出顽疾，既保持布局整洁，又无需 JavaScript 干预或复杂计算——这是现代 CSS 处理文本流的优雅实践。
