动态宽度溢出flex容器的flex项 [英] flex item of dynamic width overflow flex container

问题描述

请参阅此代码示例 [ https://codepen.io/him10meena/pen/xxwYRxo][1]

see this code example [https://codepen.io/him10meena/pen/xxwYRxo][1]

//html
    <div class="row">
      <div class="div1">fixLengthText</div>
      <div class="div2">this text is dynamic and can be very very very very very very very long</div>
      <div class="div3">fixLengthText</div>
    </div>

     <p>
      i want the middle div to be contained inside the parent div with overflow ...
    </p>


//css
/* important stuff for this example */


.row {
  width: 500px;
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.div1,.div2,.div3 {
  flex: 0 0 auto;

}


/* other stuff */
div {
  padding:1em;
  margin:0.2em;
  background-color: rgba(0,0,0,0.125)
}

我的第一列和最后一列具有固定长度的字符串，该字符串是静态的，但是我的中层div可以具有任何长度的字符串，并且它溢出示例链接中所示的父flex容器

my 1st and last column have constant length string which is static, but my middle div can have any any length string and its overflows the parent flex container shown in example link

所以我想让它的宽度等于它的内容，并且一旦内容开始增长超过其容量，它就应该显示为省略号. ...

so i want to have it width equal to its content and as soon as the content start growing more than its capacity it should show it will ellipsis ie. ...

我只希望一行中所有3个div的内容而没有任何换行.我更喜欢在div2上不设置最大宽度或显式宽度的解决方案(因为我的整个div宽度是基于设备分辨率的，因此我在链接中给出了固定值，仅供参考).只是好奇flex是否有任何解决办法

i want the content of all 3 divs in one line only without any wrapping. i would prefer solution without setting the max-width or explicit width on the div2(since my whole div width is based on device resolution here i have give it fixed value in link for example purpose only). just curious if there is any fix in flex for this

推荐答案

您只需要允许第二个div缩小即可，然后为省略号溢出添加通用属性:

You simply need to allow the shrink for the second div then add the common properties for the ellipsis overflow:

.row {
  width: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.div1,
.div2,
.div3 {
  flex: 0 0 auto;
}


/* other stuff */
div {
  padding: 1em;
  margin: 0.2em;
  background-color: rgba(0, 0, 0, 0.125)
}

.div2 {
  flex-shrink:1;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

<div class="row">
  <div class="div1">fixLengthText</div>
  <div class="div2">this text is dynamic and can be very very very very very very very long</div>
  <div class="div3">fixLengthText</div>
</div>

<p>
  i want the middle div to be contained inside the parent div with overflow ...
</p>

这篇关于动态宽度溢出flex容器的flex项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！