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

2020-01-04 08:19:28

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

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

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

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

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

.{
  : : : }

 这样就解决了问题


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

  • 精彩推荐

  • 2018-06-04 10:06:43

    mysql查询数据的同时对它进行删除操作

    今天遇见一个问题，需要把mysql数据库里面的 商品主表 和它的每一个条目对应不上的数据给全部删除(数据如下图);也就是整理一下数据库里的数据保证数据的可用;

  • 2018-06-19 16:39:03

    java缩放图片、java裁剪图片代码工具类

    在系统的上传图片功能中，我们无法控制用户上传图片的大小，用户可能会上传大到几十M小到1k的的图片，一方面图片太大占据了太多的空间，另一方面，我们没办法在页面上显示统一大小的图片。所以我们需要对用户上传的图片进行缩放和裁剪，这里的缩放和平常的压缩不是一个意思，因为要实现小的图片会放大，大的图片会缩小，而且是等比例变的，图片不会显示挤压的效果。而这种操作Java完全可以实现。下面分享下java缩放、裁剪图片的工具类。