是否存在纯CSS方案可控动态工具栏子元素的溢出内容省略

核心逻辑 #

利用CSS容器查询（Container Queries），基于toolbar容器的实际可用宽度自动切换标签显示状态——空间充足时显示完整的「名称+值」，空间不足时隐藏每个标签的名称部分。这种方案无需JavaScript监听尺寸变化，也不用依赖固定的媒体查询，完美适配元素数量、文本长度、字体大小动态变化的场景。

实现代码 #

CSS 代码 #

/* 让toolbar成为容器查询的基准容器 */
.toolbar {
  container-type: inline-size;
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
  margin: 10px 0;
  gap: 10px;
}

/* 默认状态：显示标签名称和值 */
.filter-tag {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 20px;
  background-color: #3978a1;
  color: #ffffff;
  text-wrap: nowrap;
}

/* 容器查询规则：当toolbar宽度不足时，隐藏标签名称 */
@container (max-width: 350px) {
  .filter-tag__name {
    display: none;
  }
  /* 可选优化：隐藏名称后让标签值居中显示 */
  .filter-tag {
    grid-template-columns: auto;
    justify-content: center;
  }
}

/* 演示用容器样式，仅用于展示不同宽度效果 */
.space {
  margin: 20px 0;
  padding: 10px;
}
.enoughspace {
  background: #bbb;
}
.tinyspace {
  max-width: 350px;
  background: #eee;
}

HTML 代码 #

<div class="space enoughspace">
  <div class="toolbar">
      <div class="filter-tag">
        <span class="filter-tag__name">Group1:</span>
        <span class="filter-tag__value">Option One</span>
      </div>
      <div class="filter-tag">
        <span class="filter-tag__name">Group1:</span>
        <span class="filter-tag__value">Option Two</span>
      </div>
      <div class="filter-tag">
        <span class="filter-tag__name">Company:</span>
        <span class="filter-tag__value">SO</span>
      </div>
      <div class="filter-tag">
        <span class="filter-tag__name">Company:</span>
        <span class="filter-tag__value">QQ</span>
      </div>
  </div>
</div>

<div class="space tinyspace">
  <div class="toolbar">
      <div class="filter-tag">
        <span class="filter-tag__name">Group1:</span>
        <span class="filter-tag__value">Option One</span>
      </div>
      <div class="filter-tag">
        <span class="filter-tag__name">Group1:</span>
        <span class="filter-tag__value">Option Two</span>
      </div>
      <div class="filter-tag">
        <span class="filter-tag__name">Company:</span>
        <span class="filter-tag__value">SO</span>
      </div>
      <div class="filter-tag">
        <span class="filter-tag__name">Company:</span>
        <span class="filter-tag__value">QQ</span>
      </div>
  </div>
</div>

补充说明 #

• 容器查询中的max-width阈值可根据实际需求调整，也可以结合min-content等逻辑实现更智能的触发（需注意浏览器兼容性）
• 主流浏览器（Chrome、Firefox、Edge、Safari 16.4+）均已支持容器查询，无需担心兼容性问题
• 所有样式切换由CSS自动处理，完全规避了JavaScript监听尺寸带来的性能开销和变量监控复杂度

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