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

2020-01-04 08:19:28

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

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

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


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

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

.{
  : : : }

 这样就解决了问题


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

  • 2020-12-03 10:48:41

    在window10和Linux子系统 WSL如何互传文件

    想将 window下下载的文件上传到 linux 子系统中,如何用命令实现,其实可以将文件直接拖拽到 linux 在window下的目录即可(C:\Users\yunan.hu\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu20.04onWindows_79rhkp1fndgsc\LocalState\rootfs)但是在linux下用命令怎么实现呢?

  • 2020-12-03 16:25:34

    WSL安装及升级WSL2

    幸好我们有了WSL(Windows Subsystem for Linux),顾名思义就是Windows中可以用Linux了,当然命令也会丰富更多,尤其是WSL2的发布,使得更多原来只能在Linux中做的事情现在也可以在Windows中干了。那么接下来我们就分别介绍WSL和WSL2的安装。

  • 2020-12-06 16:46:11

    git撤销pull

    刚刚不小心pull了一下,有错误,想撤回怎么办。

  • 2020-12-06 19:05:13

    visual studio 配置 intellij idea快捷键

    我原本从intellij idea转换到visual studio是因为webstorm没办法远程开发,而visual studio有remote wsl,和remote ssh,看着挺不错的样子。

  • 2020-12-06 20:38:30

    intellij idea远程开发remote

    开发时一般的平台都是windows,但windows对开发极其不友好,一般都会在本地开启虚拟机,安装上linux环境进行项目的部署测试。下面介绍一种windows主机与linux虚拟机代码同步的方法。这个工具适用于jerbrains公司旗下的很多产品,比如idea、webstrom、phpstrom等。但是要注意你安装的IDE必须是专业版的,社区版的IDE是没有这个代码同步功能的哦!