文本省略优先级答案

【问题标题】：text ellipsis priority文本省略优先级
【发布时间】：2019-05-17 20:58:11
【问题描述】：

我有一个带有 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

【问题讨论】：

这个指定的不够。当两个内容都很短时会发生什么； item1内容长，item2内容短； item1 短，item2 长；两者都很长；两者都很长，但一个明显比另一个长？

标签： html css flexbox ellipsis

【解决方案1】：

justify-content: space-between;

section {
   display: flex;
   width: 50%;
   justify-content: space-between;
}
section>div {
   background: #eeeeee;
   padding: 15px;
}

<section>
   <div>
      <div>Area 1</div>
   </div>
   <div>
      <div>Area 2</div>
   </div>
</section>

【讨论】：

【解决方案2】：

只需将flex: 1.5 或 2 应用于第 1 部分（您想要更大的宽度）并将flex:1 应用于另一个 div 以获得更小的宽度

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

<div style="display:flex;width:300px">
  <div style="background-color: red;min-width: 50px;flex:1.5;">
    <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>

【讨论】：

【解决方案3】：

找到了方法——将第二个项目的 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>

谢谢大家

【讨论】：