css_flex盒子内的元素文本超出部分省略

• 搜索文本超出部分省略, 可以搜索到如下代码

white-space: nowrap;
/*超出的空白区域不换行*/
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*文本超出显示省略号*/

• 但是如果某个元素是flex盒子的子项, 且宽度自适应的话, 想要实现内部元素的的文本省略, 会发现子元素会被文本撑开

<div id="d5">
  <div id="d6"></div>
  <div id="d7">
    <div id="d8">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed delectus asperiores repellendus eligendi minima
      odit ullam facilis rerum praesentium, deserunt veritatis at voluptatibus et quae nihil accusantium nemo eos
      laboriosam excepturi cumque aliquid voluptate, fugit nam. Veniam maiores eum voluptatem magni exercitationem
      inventore veritatis aut tempora quae quisquam, perspiciatis reiciendis!
    </div>
  </div>
</div>

#d5 {
  width: 500px;
  height: 100px;
  display: flex;
}

#d6 {
  flex-grow: 0;
  flex-shrink: 0;
  flex: 0 0 100px;
  background-color: lightblue;
}

#d7 {
  /* flex-grow: 1; */
  flex: 1 0 0;
  background-color: lightcoral;
}

#d8 {
  width: 100%;
  white-space: nowrap;
  /*超出的空白区域不换行*/
  overflow: hidden;
  /*超出隐藏*/
  text-overflow: ellipsis;
  /*文本超出显示省略号*/
}

• 如上所示, #d5,#d6,#d7 均是模拟布局的元素, #d7作为flex元素的子元素自适应宽度, 现使用#d7作为容器, #d8设置宽度为100%时, 其内部文本宽度大于#d8时, #d8宽度会被内容撑开
• 参考博文解决flex布局内容超出盒子宽度问题
• 设置#d7同样为flex容器, #d8成为了flex-item, 但是仅仅这样还不够, 需要设置#d8width属性, 令其自适应宽度

#d7 {
  /* flex-grow: 1; */
  flex: 1 0 0;
  background-color: lightcoral;
  display: flex;
}

#d8 {
  width: 0;
  flex-grow: 1;
  white-space: nowrap;
  /*超出的空白区域不换行*/
  overflow: hidden;
  /*超出隐藏*/
  text-overflow: ellipsis;
  /*文本超出显示省略号*/
}

• 需要注意: 经测试, width属性不可使用flex-basis代替