根本原因是flex默认按项目整体分配空间，文字长度动态变化导致图标无法锚定末尾；需用inline-flex替代flex，文字设min-width:0和overflow:hidden，图标设flex:0 0 auto，才能真正紧贴文字末尾。
为什么flex容器里图标不跟文字末尾“粘”住
常见现象是：文字变长时图标被挤到下一行，或文字变短时图标和文字之间出现不可控空隙。根本原因在于flex默认按项目（item）整体分配空间，而文字内容长度动态变化，flex: 1或width类设置无法让图标“感知”文字真实结束位置。
display: flex + white-space: nowrap组合失效的典型场景
很多人试过给文字加white-space: nowrap、给图标加flex-shrink: 0，但依然失败——问题常出在父容器没设min-width: 0，导致flex算法强行拉伸文字容器去填满剩余空间，把图标顶出去。
- 必须给文字元素显式设
min-width: 0，否则flex-shrink在多数浏览器中不生效 -
overflow: hidden要加在文字容器上，不是父容器；否则省略号逻辑错位 - 图标不能用
margin-left: auto——它会脱离文字流，变成“最后一项”，而非“文字末尾”
真正紧贴文字末尾的写法：inline-flex替代flex
把父容器设为display: inline-flex，文字和图标作为两个inline级子项并排，文字用flex: 1 1 auto，图标用flex: 0 0 auto，再配合min-width: 0和overflow控制：
.text-icon-wrapper {
display: inline-flex;
align-items: center;
gap: 4px; /* 可选，控制文字与图标间距 */
}
.text-content {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icon {
flex: 0 0 auto;
}关键点：inline-flex让整个组合像一个内联盒子一样参与文本流，文字容器不会无限制撑开，图标自然锚定在其右侧边界。
立即学习“前端免费学习笔记（深入）”；
移动端适配和字体缩放时容易忽略的坑
当用户放大字体（如系统辅助功能开启）或使用rem/em单位时，text-overflow: ellipsis可能突然失效——因为inline-flex容器宽度受父级行高影响，而行高可能被放大后溢出。
- 确保父级有明确
max-width（不能只靠width: fit-content） - 图标用
font-size: inherit或height: 1em，避免固定px值导致比例失调 - 测试
zoom: 150%或font-size: 20px下是否仍能触发省略号
最棘手的不是布局崩坏，而是省略号在某些字号下“闪现一下又消失”——那通常说明min-width: 0漏写了，或者gap值在缩放后超出了可用空间。
