超长文本在响应式页面中需精准控制换行位置与断词方式：首选overflow-wrap: break-word防溢出保可读，flex容器中必须加min-width: 0并配合overflow: hidden、white-space: nowrap和text-overflow: ellipsis才能生效。
超长文本在响应式页面里不是“要不要换行”的问题，而是“在哪换、怎么断、会不会撑破布局”的问题。直接加 word-break: break-all 能让内容不溢出，但英文单词被切成 expe-rience 这种样子，用户根本没法读；而什么都不加，又容易触发水平滚动条，尤其在 flex 容器里，整个列表都变形。
flex 项目中长文本撑开容器怎么办
这是最常踩的坑：给 .task_title 加了 width: 50%，结果一串 Base64 或无空格 URL 还是把父容器顶宽了。根本原因不是宽度没设，而是 flex 项目默认按内容自然宽度计算 flex-basis，再配合不可断行的内容，flex: 1 反而让它更“倔”。
-
flex: 1 1 0必须写——把flex-basis设为0，让浏览器忽略内容宽度，只按剩余空间分配 -
overflow: hidden要配，否则word-break的换行逻辑不会触发 -
word-break: break-all或overflow-wrap: break-word二选一，前者激进断词（适合日志、token），后者只在溢出时才断（适合标题、描述） - 别漏掉
min-width: 0，尤其在display: flex的父容器里，否则某些浏览器会无视flex-basis: 0
单行省略号为什么死活不显示
不是 CSS 写错了，八成是三个属性没凑齐或顺序/条件不对。常见现象是文字直接跑出容器右边，或者干脆被裁掉没省略号。
- 必须同时满足：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 容器得有明确宽度：不能是
width: fit-content或没设width/max-width - 别和
display: flex直接混用——flex 子项默认主轴不换行，text-overflow失效；要么加align-self: flex-start，要么套一层div再应用截断样式 - Tailwind 用户注意：
truncate类内部就是这三属性组合，但它不处理 flex 子项，得手动加min-w-0
多行文本截断怎么跨浏览器兼容
CSS 原生只支持单行 text-overflow，多行要靠“黑魔法”——WebKit 的 -webkit-line-clamp。它在 Chrome/Safari/Edge 新版可用，Firefox 仍不支持。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 3+overflow: hidden - 必须配
word-break: break-word或overflow-wrap: break-word，否则长单词会让第 3 行撑高，省略号不出现在末尾 - Firefox 用户只能降级：用 JavaScript 计算字符数或高度截断，或改用固定行高 +
overflow: hidden配合伪元素画省略号（效果略糙但稳定） - 别对
line-clamp抱太大期望——它不保证字数均等，也不处理中英文混排断点，中文建议加word-break: keep-all防止乱切词
text-wrap: balance 是不是能自动美化换行
它真能，但只在极少数条件下起效，且容易误用。加了没变化？大概率是前提崩了。
- 只对
display: block或inline-block生效，flex子项、inline标签、伪元素上直接写无效 - 必须有
width或max-width，且不能是fit-content或auto（否则无“平衡”基准） - 只优化已有换行，不会强行把一行拆成两行；如果内容太短或字号太大导致只有一行，它就完全不工作
- 和
word-break: break-all、overflow-wrap: anywhere冲突——后者优先级更高，会覆盖 balance 的行宽分配 - 中文标题务必加
word-break: keep-all，否则可能把“用户体验”切成“用户 体验”，balance 也救不回来
真正麻烦的从来不是某一个属性，而是它们之间的优先级和生效条件互相咬合。比如 flex-basis: 0 和 min-width: 0 看似无关，但在 flex 布局里缺一不可；text-wrap: balance 写得再漂亮，遇上 white-space: nowrap 就彻底失效。调样式时，得像调试 JS 一样看 computed styles，而不是只盯着自己写的那几行 CSS。
