flex 布局下文字超出省略导致外部容器撑开如何解决？

flex 布局下文字超出省略导致外部容器撑开问题

在 flex 布局中，经常会遇到左侧图片固定大小，右侧内容占据剩余空间的布局设计。然而，当给右侧内容添加文字超出省略样式时，可能会导致外部容器被撑开。

这个问题是因为 .text 元素的内容过多，超出了容器的宽度。为了解决这个问题，需要给 .text 元素添加 min-width: 0; 样式。这样，虽然文本超出，但容器不会被撑开。

代码如下：

.text {
  min-width: 0;
}

通过添加该样式，.container 的宽度不再受 .text 内容的影响，而是按照 100vw 固定，文本超出部分将正常省略。

以上就是flex 布局下文字超出省略导致外部容器撑开如何解决？的详细内容，更多请关注其它相关文章！