背景色问题如何解决
在CSS样式中，为父元素设置固定宽高并设置溢出隐藏，同时为子元素设置背景色。但初始隐藏部分却没有背景色。如何解决这一问题？
示例代码：
.parent { width: 100px; padding-left: 10px; overflow: auto;}.son { background: greenyellow;}
解决方法：
切换为块级元素后，块级元素默认宽度为100%，导致容器宽度不够。由于单词和数字连续，不会自动换行。因此，文本直接超出了.son元素的宽度。
立即学习“前端免费学习笔记（深入）”；
解决步骤：
为.son元素添加word-break: break-all或word-break: break-word属性，以便文字换行。由于换行，.son元素将不再超出.parent元素的宽度（不会出现横向滚动条）。为.son元素设置width: fit-content，以确保超出滚动的情况。
效果演示：
[图片演示]
相关阅读：
fit-content – CSS | MDNfit-content « 张鑫旭-鑫空间-鑫生活
以上就是CSS背景色问题：如何解决父元素溢出隐藏后，子元素背景色缺失？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557455.html
微信扫一扫 
支付宝扫一扫 
