使⽤display：flex或者float后⼦元素⽂本⽆法⾃动换⾏或字数
过多⽗元素被撑开
当⽗元素设置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;
html的flex布局
white-space: nowrap;overflow:hidden;
}
结果由于p1的字数太多，使⽗元素被撑开为：
解决办法：
1.给⽗元素加width：0
.pkitem .pkpart{
flex: 1;width:0;
}
2.给⽗元素加overflow:hidden
.pkitem .pkpart{
flex: 1;overflow:hidden;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。