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

2020-01-04 08:19:28

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

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

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

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

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

.{
  : : : }

 这样就解决了问题


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

  • 精彩推荐

  • 2017-12-25 11:07:58

    mogodb 备份

    error connecting to db server: server returned error on SASL authentication

  • 2017-12-25 15:53:15

    MongoDB3.4版本配置详解

    配置文件方面，mongod和mongos有很多相同之处，下文中如有区别之处将会特别指出。 在一个节点上，通常同时启动mongod和mongos进程是正常的，他们之间不存在资源竞争，但是为了避免冲突，我们希望它们使用各自的配置文件，比如mongod.conf、mongos.conf；mongodb的某些平台下的安装包中没有自带配置文件，需要开发者自己创建。