使用display:flex或者float后子元素文本无法自动换行或字数过多父元素被撑开

最新推荐文章于 2025-09-23 10:49:42 发布

原创最新推荐文章于 2025-09-23 10:49:42 发布 · 1.6w 阅读

CC 4.0 BY-SA版权

文章标签：

61 篇文章

订阅专栏

本文介绍了解决Flex布局中子元素文本自动换行的问题，通过添加CSS属性overflow-wrap实现换行，并提供了文本超出时显示省略号的方法。

当父元素设置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：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;
}