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

2020-01-04 08:19:28

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

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

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

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

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

.{
  : : : }

 这样就解决了问题


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

  • 精彩推荐

  • 2019-06-23 09:22:33

    Android 拍摄（横\竖屏）视频的懒人之路

    一般用在多媒体录制上面，当然如果你只是简单的想录制音频，用它最合适不过，不过如果你想更多样化的录制这里推荐《Android MP3录制，波形显示，音频权限兼容与播放》。今天的主题是录制视频，用的还是老式通用的Camera，不是新的camera2（这就尴尬了.....((/- -)/），反正个人秉承能用是王道的做法（懒）。之前也尝试过FFMPEG的录制合成音频，大小和效果也不错，只是有时候的兼容性确实有些问题，最主要还是资料不多，不好改啊￣へ￣（懒）。

  • 2019-06-23 09:24:59

    仿抖音系列

    最近公司在做个短视频的项目，其中借鉴了很多抖音的设计，其中就有抖音的上下滑切换视频。

  • 2019-06-24 06:22:10

    Android RecyclerView嵌套的滑动冲突问题

    这是一个简单的recyclerView嵌套recyclerView的demo， 很明显，子布局应该也是可以滑动的才对，但你滑动子布局却是父布局在滑动 这就是滑动冲突