如何实现屏幕缩小时CSS元素从右到左逐个触发文本省略？

可以用纯Flexbox+CSS实现你要的效果，核心是通过flex-shrink控制元素收缩优先级，配合min-width限定每个元素的收缩边界，从而让最右侧元素先触发省略，再依次往左。

核心思路 #

1. 收缩优先级控制：给三个.item设置不同的flex-shrink值，数值越大，容器空间不足时收缩的优先级越高。让第三个元素（最右侧）的flex-shrink最大，第二个次之，第一个最小，这样空间不够时优先收缩最右侧元素。
2. 收缩边界限定：给每个.item设置min-width，当元素收缩到这个宽度后就不再收缩，容器继续变窄时，就会轮到下一个优先级的元素开始收缩。
3. 文本省略触发：内层.inner设置width: 100%，确保它继承父元素.item的宽度，当.item宽度小于文本内容时，触发省略效果。

修改后的代码 #

CSS

.container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px; /* 可调整，方便测试收缩效果 */
  border: 1px solid #eee;
  padding: 8px;
}

.item {
  display: flex;
  margin: 0 8px;
}

/* 第一个元素：最后收缩，优先级最低 */
.item:nth-child(1) {
  flex-shrink: 1;
  min-width: 120px;
}

/* 第二个元素：中间收缩 */
.item:nth-child(2) {
  flex-shrink: 2;
  min-width: 150px;
}

/* 第三个元素：优先收缩，优先级最高 */
.item:nth-child(3) {
  flex-shrink: 3;
  min-width: 80px;
}

.inner {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

HTML

<div class="container">
  <div class="item">
    <div class="inner">First item with long text content</div>
  </div>
  <div class="item">
    <div class="inner">Second item with even longer text content here</div>
  </div>
  <div class="item">
    <div class="inner">Third item with some text</div>
  </div>
</div>

自定义调整建议 #

• 你可以根据实际内容调整每个.item的min-width值，定义元素收缩的下限；
• flex-shrink的数值比例可以按需调整，比如把第三个元素设为5，第二个设为2，第一个设为1，只要保持从右到左数值递增即可；
• 如果希望元素收缩到内容的最小宽度后再触发下一个元素收缩，可以把min-width改为min-content，但这样元素可能会收缩得更窄，适合内容长度不确定的场景。

内容的提问来源于stack exchange，提问作者Oki