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背景色问题：如何解决父元素溢出隐藏后，子元素背景色缺失？的详细内容，更多请关注其它相关文章！