Question

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

.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

Answer 1

只需将flex: 1.5或2应用于第一部分（您想要更大的宽度），然后将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>

Answer 2

justify-content：间隔；

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>

Answer 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>

谢谢大家

文字省略号优先

3 个答案: