如何用CSS实现label宽度自适应：短内容不拉伸，长内容至少100px？

需求说明 #

需要实现一组“标签：值”条目，满足以下要求：

• 标签和值内容过长时，均显示省略号（溢出隐藏）
• 标签内容放不下时，宽度至少保留100px；标签内容较短时，不强制拉伸至100px

原代码中短标签（如最后一个案例的"T"）会被强制拉伸到100px，不符合预期。

可行解决方案 #

通过调整flex属性和使用fit-content实现自适应宽度，同时保留最小宽度限制：

完整代码示例 #

CSS 代码

.fields {
  width: 300px;
  border: 1px solid #ddd;
}
.field {
  display: flex;
  align-items: center;
}
.label {
  flex: 0 1 fit-content; /* 不放大、可收缩，初始宽度适配内容 */
  min-width: 100px; /* 内容过长时至少保留100px宽度 */
  max-width: calc(100% - 20px); /* 预留分隔符空间，避免标签挤掉值的位置 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}
.divider {
  flex: 0 0 10px;
  text-align: center;
}
.value {
  flex: 1 1 auto; /* 自动填充剩余空间，空间不足时可收缩 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}

HTML 代码

<div class="fields">
  <div class="field">
    <div class="label">
      Long Long Long Long Label
    </div>
    <div class="divider">:</div>
    <div class="value">
      Simple Value
    </div>
  </div>

  <div class="field">
    <div class="label">
      Regular Long Label
    </div>
    <div class="divider">:</div>
    <div class="value">
      Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value
    </div>
  </div>

  <div class="field">
    <div class="label">
      T
    </div>
    <div class="divider">:</div>
    <div class="value">
      Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value
    </div>
  </div>
</div>

关键逻辑说明 #

• flex: 0 1 fit-content：让标签宽度默认适配自身内容，不会主动占用多余空间，容器空间不足时可收缩
• min-width: 100px：确保标签内容过长时，不会被压缩到100px以下，优先保留足够宽度再截断显示省略号
• max-width: calc(100% - 20px)：预留分隔符的宽度，避免标签过宽导致值完全被挤出容器

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