通过将多个内联元素包裹在单行 white-space: nowrap 容器中，并结合 text-overflow: ellipsis，可实现容器宽度收缩时，右侧项目优先被截断并显示省略号，左侧项目保持完整——无需 JavaScript，纯 CSS 即可达成“从右到左逐个隐藏”的视觉效果。
通过将多个内联元素包裹在单行 white-space: nowrap 容器中，并结合 text-overflow: ellipsis，可实现容器宽度收缩时，右侧项目优先被截断并显示省略号，左侧项目保持完整——无需 javascript，纯 css 即可达成“从右到左逐个隐藏”的视觉效果。
要实现「元素从右向左依次省略」（即第三项先缩为 ...，再是第二项，最后才是第一项），关键在于放弃对每个 .item 独立设置 text-overflow，转而将所有内容视为同一行内联流进行整体截断。Flexbox 的默认行为（各子项独立伸缩）恰恰阻碍了这种顺序省略，因此需改用 display: inline-block + white-space: nowrap 的组合策略。
✅ 正确实现原理
- 外层容器（
.container）保持flex以实现垂直居中； - 内层
.container2设为white-space: nowrap+overflow: hidden+text-overflow: ellipsis，使其表现如一个超长单行文本； - 所有
.item改为display: inline-block（或直接使用<span></span>），确保它们在一行内连续排列，浏览器按渲染顺序（从左到右）决定截断位置——但由于省略号仅出现在行尾，当空间不足时，最右侧的内容自然最先被裁切，从而模拟出“从右到左逐个消失”的效果。
? 完整可运行示例
<div class="container">
<div class="container2">
<span class="item">First item with long text</span>
<span class="item">Second item with even longer text</span>
<span class="item">Third item</span>
</div>
</div>.container {
display: flex;
align-items: center;
height: 2.5em; /* 保证垂直居中基准高度 */
padding: 0 1em;
}
.container2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%; /* 可选：约束最大宽度 */
}
.item {
display: inline-block;
margin-right: 0.75em; /* 项间间距 */
vertical-align: middle; /* 对齐基线，避免因字体下沉错位 */
padding: 0.25em 0.5em;
background: #f0f0f0;
border-radius: 4px;
}
/* 最后一项不加右边距 */
.item:last-child {
margin-right: 0;
}⚠️ 注意事项
-
不可对
.item单独设overflow: hidden：否则每项独立截断，失去“顺序省略”逻辑； -
避免使用
flex直接包裹文本项：Flex 子项默认不参与text-overflow的行级截断； -
vertical-align: middle是关键：确保inline-block元素在行内垂直居中，与 Flex 容器的align-items: center效果一致； - 若需支持图标（如示例中的
.bigthing），同样用inline-block内嵌，它会随文本一同参与省略流程； - 此方案兼容所有现代浏览器（Chrome 30+、Firefox 7+、Safari 6.1+、Edge 12+）。
该方法简洁、语义清晰、零 JS 依赖，完美契合响应式导航栏、标签栏、工具条等需要动态收缩且强调信息优先级的 UI 场景。
