flex 布局子内容将父元素撑开
遇到的问题:
需要显示的文本是通过富文本编辑器提交是文本(包含了p标签),展示时通过flex布局实现。如下图:
但是通过flex布局实现后发现文本内容过长时将后半部分整体撑开了,导致整个卡片内容被撑开了
解决:
通过给富文本编辑器生成的p标签设置flex:1;width:0px;
的方式使整个p标签的宽度由flex属性去决定
(也就是有p标签的父元素宽度所决定),再通过设置溢出隐藏的css属性实现溢出隐藏。
overflow: hidden; white-space: nowrap; word-break: break-all;
最终效果,成功解决flex布局下父元素被撑开。