如何在空间不足时隐藏JIRA时间轴中的状态信息？

要实现空间不足时隐藏工单状态的需求，最适配你场景的方法是使用CSS容器查询——因为你的.accordion宽度由grid列模板动态控制，容器查询可以根据父容器的实际宽度触发样式变化。具体步骤如下：

1. 优化HTML结构 #

给状态元素添加专属类名，同时修正拼写错误（将className改为标准HTML属性class）：

<div class="accordion">
  <div class="accordion-content">
    <div class="timeline-bar">
      <div>JIRA-1234</div>
      <div><img alt="Url Icon" width="25" src="#url-icon"></div>
      <div class="epic-summary">EPIC: This is some description</div>
      <!-- 添加类名用于CSS定位 -->
      <div class="ticket-status">In progress</div>
    </div>
  </div>
  <div class="accordion-toggle">
    <img src="#toggle-icon" width="25" height="25">
  </div>
</div>

2. 配置CSS规则 #

开启容器查询，并设置宽度阈值控制状态元素的显示/隐藏，同时优化flex布局的优先级：

.accordion {
  border: 1px solid black;
  width: 600px; /* 示例宽度，实际由grid列模板控制 */
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.accordion-content {
  flex: 1 1 auto;
}

.epic-summary {
  flex: 1 1 auto;
  /* 空间不足时先截断描述文本，保留关键信息 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-bar {
  border-right: 1px solid black;
  display: flex;
  align-items: center;
  /* 开启容器查询，基于容器的行内尺寸 */
  container-type: inline-size;
}

.timeline-bar>div {
  padding: 0 5px;
  /* 固定尺寸元素禁止被压缩 */
  flex-shrink: 0;
}

/* 允许描述文本被压缩 */
.timeline-bar .epic-summary {
  flex-shrink: 1;
}

/* 容器查询：当timeline-bar宽度小于阈值时隐藏状态 */
@container (max-width: 400px) {
  .ticket-status {
    display: none;
  }
}

核心逻辑说明 #

• 容器查询适配动态宽度：通过container-type: inline-size让.timeline-bar成为查询上下文，完全适配grid列模板的动态宽度，比视口媒体查询更精准。
• flex优先级控制：JIRA编号、图标等固定尺寸元素设置flex-shrink:0避免被压缩；描述文本设为可压缩，空间不足时先截断文本，最后再隐藏状态元素，保证关键信息优先展示。
• 阈值自定义：你可以根据实际内容调整@container中的宽度阈值（比如380px、420px），找到最适合的触发临界点。

如果需要兼容不支持容器查询的旧浏览器，可以用视口媒体查询作为降级方案，但无法精准匹配grid布局的动态宽度。

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