html - 文本省略优先级

Question

我有一个带有 display flex 的容器，其中包含 2 个项目。这两个项目都有文本省略号以支持长文本。我想在项目之间设置一些优先级，以便根据需要使项目 1 作为匹配位置为项目 2 保留一些固定空间。这意味着 - 如果容器宽度为 200 像素 - 项目 2 的最小尺寸为 50 像素，我喜欢第 1 项达到 150 像素（然后是文本省略号）。最好的方法是什么？

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

<div style="display:flex;width:300px">
  <div style="background-color: red;min-width: 50px;">
    <div class="ovf">item1 item1 item1</div>
  </div>
  <div style="background-color: blue;min-width: 40px;flex-shring:2">
    <div class="ovf">item2 item2 item2 item2 item2 item2 </div>
  </div>
</div>

JSFiddle

标签： htmlcssflexboxellipsis

Answer 1

找到了这样做的方法 - 将第二个项目 flex 属性设置为 1 ：

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

<div style="display:flex;width:300px">
  <div style="background-color: red;min-width: 0">
    <div class="ovf">item1 item1 item1</div>
  </div>
  <div style="background-color: blue;min-width: 40px;flex:1;">
    <div class="ovf">item2 item2 item2 item2 item2 item2 </div>
  </div>
</div>

谢谢大家