当父元素设置display:flex后,子元素会自动布局并适应宽度,但里面的文本文字超出边界却无法自动换行
解决方法:
.container2 .block .content1 p{
width:calc(100%);height:1.2rem;line-height:0.6rem;
overflow:hidden;overflow-wrap: break-word;
}
只需要给子元素p加一个css属性: overflow-wrap:break-word;即可正常自动换行
补充:使用flex布局内部文本过多使父元素被撑开问题
预期效果:字数超出不换行,显示省略号
父元素设为flex:1
.pkitem .pkpart{
flex: 1;
}
内部子元素:
.pkitem .pkpart .t2 .p1{
width:90%;
text-overflow:ellipsis;
white-space: nowrap;overflow:hidden;
}
结果由于p1的字数太多,使父元素被撑开为:
解决办法:
1.给父元素加width:0
.pkitem .pkpart{
flex: 1;width:0;
}
2.给父元素加overflow:hidden
.pkitem .pkpart{
flex: 1;overflow:hidden;
}