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

2020-01-04 08:19:28

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

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

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


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

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

.{
  : : : }

 这样就解决了问题


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

  • 2021-01-05 15:41:42

    nodejs修改时区

    ​let date = new Date(); date.setHours(date.getHours() + 8);

  • 2021-01-06 23:09:38

    mp3解码器转PCM合并

    首先,为了混合两个音频文件,您需要操纵它们的原始表示;由于MP3文件被压缩,您无法直接访问信号的原始表示.您需要对压缩的MP3流进行解码,以便“理解”您的音频信号的波形,然后可以混合使用.

  • 2021-01-08 16:47:37

    nodejs如何使用fetch

    node 中没有实现 fetch,你可以使用 node-fetch,使得在 node 中也可以使用 fetch.

  • 2021-01-08 16:49:59

    CommonJs 与 ESModule区别

    node中模块导入require是一个内置的函数,因此只有在运行后我们才可以得知模块导出内容,无法做静态分析