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

2020-01-04 08:19:28

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

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

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


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

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

.{
  : : : }

 这样就解决了问题


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

  • 2019-12-12 14:19:32

    laravel自定义分页LengthAwarePaginator

    有时候我们使用larave提供的后台分页数据库查询,有时候限制太多,我们需要自己定制分页功能。 下面是我给大家一个例子,我们可以根据例子,制作自己的分页功能。

  • 2019-12-14 21:04:05

    聊聊keep-alive组件的使用及其实现原理

    keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。 它提供了include与exclude两个属性,允许组件有条件地进行缓存。

  • 2019-12-14 21:06:58

    vue----keep-alive缓存,activated,deactivated两个生命周期函数,,meta实现缓存

    如果没有缓存,每点击一次导航,内容区就会创建一个组件,该组件会经历整个生命周期,每点击一次,就会创建一个组件,比较浪费性能, 这时,我们就要考虑到是否能将点击过的已创建的组件进行缓存,当再次点击已访问过的组件时,这时,就会从缓存中获取该组件,而不会重新创建,

  • 2019-12-17 11:56:05

    ffmpeg concat video and mix audio,ffmpeg简单快速的合并视频

    在ffmpeg中,官网给出两种连接媒体文件(音频、视频、etc..)的解决方案。 the concat "demuxer" the concat "protocol" 对比而言, demuxer更加灵活一些,需要媒体文件是属于相同的编解码器,但是可以属于不同的容器格式(mp3,wav, mp4, mov, etc..). 而protocol只适用于少数集中容器格式。