flex 布局子内容p元素被撑开

2020-01-04 08:19:28

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

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

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


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

大体是上面这样,比如div 进行 width:0  里面等p元素设置如下属性

.{
  : : : }

 这样就解决了问题


参考地址 flex布局被子元素撑开,如何保持内容不超出容器

  • 2019-10-30 00:33:15

    Mac 查看本机ip地址

    记住看好下面,查询mac的本机地址是ifconfig而不是ipconfig,windows才是ipconfig,虽然不知道if是啥意思。

  • 2019-10-30 13:25:17

    mybatis foreach标签详解,逗号,and还有or,留一个

    查询数据库中文章的相关文章 文章为一个表 字段tags为相关文章字符串中间用','逗号进行啦分割 查询完一个文章后可以把tags字段构造为一个List<String> 然后利用这个集合作为条件来查询

  • 2019-11-04 02:12:42

    genymotion免费版

    genymotion是一套完整的android虚拟环境工具,相对官方android sdk,它的安装和使用简洁方便不臃肿,但是现在genymotion官方网站不再提供个人的下载,这篇博客记录了如何下载和使用genymotion个人版.