Flex 布局文字超出省略撑开父容器的解决方法是什么？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《Flex 布局文字超出省略撑开父容器的解决方法是什么？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

flex 布局文字超出省略撑开父容器问题解决

在 flex 布局中，遇到给文章标题添加文字超出省略会导致外部容器被撑开的难题？别担心，以下解决方案将为您提供帮助。

问题根源在于 .text 元素内容过多，导致它撑大了父容器 .container，而传递到祖先元素 .wrap 的宽度也增加了，与预期不符。而且，文本超出隐藏样式未应用到。

要正确实现自适应宽度和文字超出隐藏，请给 .text 元素添加 min-width:0; css 样式。通过设置最小宽度为 0，您可以允许元素根据内容收缩，避免撑开父容器。

因此，更新后的 css 如下：

.text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样，.container 和 .wrap 的宽度将保持不变，文本将根据需要自动收缩，并且文字超出隐藏样式将正常应用。

到这里，我们也就讲完了《Flex 布局文字超出省略撑开父容器的解决方法是什么？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！