如何防止同时截断项目

Question

我正在尝试解决一个问题，其中我连续有 3 个项目，并且在调整窗口大小时我想首先截断第二个项目，然后在其 minWidth 之后开始截断第一个项目。目前所有项目都同时被截断。

.container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.child {
  border: 1px solid;
  height: 40px;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.btn {
  min-width: 30px
}

.label {
  overflow: hidden
}

<div class="container">
  <div class="child label">
    <h3 class="truncate">Item label</h3>
  </div>
  <div class="child btn truncate">
    Item Button
  </div>
  <div class="child">
    Item Status
  </div>
</div>

https://jsfiddle.net/e08m4Lcp/

Answer 1

TL;DR如果您需要在父级中支持 1 个子级收缩而不是另一个flex子级，则可以使用flex-shrinkCSS 属性。如果您想阅读更官方的解释，请参阅 flex-shrink 的 MDN 文档

解决方案在您的示例中，添加flex-shrink: 9999;将使.btn该组件专门收缩，直到达到其最小宽度。

样本

div {
  gap: 10px;
  display: flex;
  white-space: nowrap;
}

p:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
}

p:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 999999;
  min-width: 50px;
}

<div>
  <p>Lorem ipsum dolor sit amet
  <p>Lorem ipsum dolor sit amet
  <p>Lorem ipsum
</div>

解释

flex-shrink作为所有值的比率。因此，如果您有 2 个元素，flex-shrink: 1并且flex-shrink: 2彼此相邻，则2收缩速度将是1。

为了达到您想要的结果，只需设置一个任意大的值，例如flex-shrink:9999在一个项目上，这样它将专门收缩（直到其他属性（如min-width停止它，此时下一个项目将开始收缩）。