使用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;
  white-space: nowrap;overflow:hidden;
}

 结果由于p1的字数太多，使父元素被撑开为：

解决办法：

1.给父元素加width：0

.pkitem .pkpart{
  flex: 1;width:0;
}

 2.给父元素加overflow:hidden

.pkitem .pkpart{
  flex: 1;overflow:hidden;
}