CSS背景色问题：如何解决父元素溢出隐藏后，子元素背景色缺失？

有志者，事竟成！如果你在学习文章，那么本文《CSS背景色问题：如何解决父元素溢出隐藏后，子元素背景色缺失？ 》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

背景色问题如何解决

在CSS样式中，为父元素设置固定宽高并设置溢出隐藏，同时为子元素设置背景色。但初始隐藏部分却没有背景色。如何解决这一问题？

示例代码：

.parent {
  width: 100px;
  padding-left: 10px;
  overflow: auto;
}

.son {
  background: greenyellow;
}

解决方法：

切换为块级元素后，块级元素默认宽度为100%，导致容器宽度不够。由于单词和数字连续，不会自动换行。因此，文本直接超出了.son元素的宽度。

解决步骤：

1. 为.son元素添加word-break: break-all或word-break: break-word属性，以便文字换行。
2. 由于换行，.son元素将不再超出.parent元素的宽度（不会出现横向滚动条）。
3. 为.son元素设置width: fit-content，以确保超出滚动的情况。

效果演示：

[图片演示]

相关阅读：

• fit-content - CSS | MDN
• fit-content « 张鑫旭-鑫空间-鑫生活

今天关于《CSS背景色问题：如何解决父元素溢出隐藏后，子元素背景色缺失？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！