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-25 15:40:16

    JS对象是否拥有某属性如何判断

    原型链上继承过来的属性无法通过hasOwnProperty检测到,返回false。 需注意的是,虽然in能检测到原型链的属性,但for in通常却不行。

  • 2019-04-30 11:23:36

    elasticsearch和analysis-ik的安装使用

    全文搜索和中文分词主要介绍了两组全文搜索加中文分词方案; TNTSearch+jieba-php这套组合对于博客这类的小项目基本够用了;

  • 2019-04-30 11:42:24

    php7+laravel+coreseek(sphinx)中文搜索初步实现(Linux)

    官网www.coreseek.cn已不能下载,所以需从网上找资源, 注意的一点是,笔者安装coreseek-3.2.14版本后,使用时提示client版本高于server版本的错误, php的sphinx扩展,为使用者,为client;coreseek是系统服务,为server

  • 2019-04-30 13:55:13

    浅谈mysql fulltext全文索引优缺点

    为什么会注意到mysql的fulltext? nima, 还是上次innodb转成tokudb引擎的事,这次alter修改表引擎的时候,提示percona tokudb是不支持fulltext索引的.