美文网首页
flex 布局子内容被撑开

flex 布局子内容被撑开

作者: Primers | 来源:发表于2018-11-08 21:18 被阅读0次

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

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

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


    19.11.22更新 - 将该元素的宽度设置为 auto 也是可以的,我认为这样更为合理。

    相关文章

      网友评论

          本文标题:flex 布局子内容被撑开

          本文链接:https://www.haomeiwen.com/subject/yrsgxqtx.html