描述一种情况,父元素 flex 布局,子元素有一行文字,将其设置为不换行隐藏后显示省略号,但实际并不是想象的那样,而导致布局变形。

 

这种情况是因为 flex 布局特性,子内容优先被内容撑开使得文字不隐藏。

 

 

解决:将该元素的宽度设置为 0 ,然后使用 flex:1 样式,将宽度交给 flex 布局来决定,最终子元素不会被内容撑开,达到想要的效果。。高度不对设置高度0

 

 

受浏览器版本的限制,可能谷歌71没问题,84会出现

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-05-06
  • 2022-12-23
  • 2022-12-23
  • 2021-07-01
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-07-09
  • 2021-09-24
  • 2021-08-13
  • 2021-09-25
  • 2021-08-05
  • 2021-05-17
相关资源
相似解决方案