必须给标题直接子元素设min-width: 0并配overflow: hidden、white-space: nowrap、text-overflow: ellipsis，同时父容器加max-width，按钮加flex-shrink: 0。
flex子项里文字撑开按钮，先看min-width是不是auto
Flex子项默认min-width: auto，浏览器会死守“完整显示单词或URL”，哪怕父容器只有200px宽，它也拒绝压缩——结果就是标题把右侧按钮直接顶出容器边界。这不是按钮太宽，是标题不肯缩。DevTools里检查该元素的computed min-width，如果还是auto，说明样式没生效，优先排查选择器是否写错、是否被更高权重规则覆盖。
必须加min-width: 0，但只加在标题所在元素上
min-width: 0必须加在含标题文本的**直接子元素**上，比如<h3 class="title"></h3>或<p class="subtitle"></p>，而不是外层.item或.card容器。嵌套场景下（如.header里再包一层display: flex），内层文本容器也得单独加——它不继承，也不靠父级设置传递。
- ✅ 正确：
.title { min-width: 0; } - ❌ 无效：
.item { min-width: 0; }（对子项无影响） - ⚠️ Safari旧版（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，建议显式写
光加min-width: 0不够，还得配齐截断三件套
min-width: 0只是“解锁收缩能力”，不是自动截断。要让长标题真正收住、不挤按钮，必须同时满足：
-
overflow: hidden：加在标题元素上，否则溢出内容仍可见 -
white-space: nowrap：确保单行显示，为text-overflow: ellipsis创造前提 -
text-overflow: ellipsis：仅对块级盒生效，所以标题元素还得是display: block（<h3></h3>默认就是）
漏掉任意一个，都会出现“文字变一行跑出屏幕”或“省略号不出现”的情况。
父容器和按钮本身也得约束宽度
如果父容器没设width或max-width，Flex容器会按内容自适应，根本不存在“溢出”概念——标题再长，容器也跟着拉宽，按钮自然被顶走。所以：
- 给父容器加
max-width: 100%或具体值（如max-width: 375px） - 按钮加
flex-shrink: 0防被压缩，但必须配合white-space: nowrap和box-sizing: border-box - 纯文字按钮（如
<button>编辑</button>）要显式设display: inline-block，否则垂直padding不生效，热区不足44px
真正卡住的往往不是标题样式，而是父容器缺宽度约束、按钮没防收缩、或者overflow: hidden加错了层级——这三处任一遗漏，都可能在iOS小屏或特定字体下突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
