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

2020-01-04 08:19:28

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

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

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

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

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

.{
  : : : }

 这样就解决了问题


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

  • 精彩推荐

  • 2019-04-18 14:49:20

    Android图片加载框架最全解析，带你全面了解Glide 4的用法

    Glide的最新版本已经出到了4.4.0，可以说Glide 4已经是相当成熟和稳定了。而且也不断有朋友一直在留言，想让我讲一讲Glide 4的用法，因为Glide 4相对于Glide 3改动貌似还是挺大的，学完了Glide 3再去使用Glide 4，发现根本就无法使用。

  • 2019-04-23 13:57:37

    replace js 替换全部替换第一个

    RegExp("12333", "g"); 第一个参数是想要替换的内容 第二个参数“g”是匹配全部的意思，也可以换成"t"，就是匹配第一个