溢出内容背景色未扩展
[英]Overflow content background-color not expanding
问题描述
I'm not entirely sure what I'm doing wrong, but the background-color of some divs are not expanding the way I want them to. 
我不完全确定自己在做什么错，但是某些div的背景颜色并没有像我期望的那样扩展。 Here's a fiddle to demonstrate 这是一个小提琴来演示
https://jsfiddle.net/9kxxcc04/ https://jsfiddle.net/9kxxcc04/
<body><div><pre style="background-color: red">A LOT OF CONTENT THAT OVERFLOWS</pre></div></body>
Basically I have some div/pre blocks with overflowing content and I want their background colors to be the same the entire width of the div that they're in. 基本上，我有一些带有溢出内容的div / pre块，并且我希望它们的背景颜色与它们所在的div的整个宽度相同。
Thanks! 谢谢！
3 个解决方案
解决方案1
1 已采纳 2017-12-21 14:07:39
Just remove this line from actual-content class 只需从实际内容类中删除此行
left: 0;
right: 0;
And remove overflow:hidden from body. 并清除体内隐藏的溢出物 。
解决方案2
0 2017-12-21 14:05:36
Add this CSS and I think it will fix the wrapping: 添加此CSS，我认为它将解决包装问题：
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
解决方案3
0 2017-12-21 14:07:44
pre is a block level element and as such won't extend beyond it's container in this case. pre是一个块级元素，因此在这种情况下不会超出其容器。 If you swap the display style to inline-block then you will get the background to overflow with the text. 如果将显示样式替换为行内块，则背景会溢出文本。 At least from what I understand from the fiddle. 至少从我从小提琴中学到的知识来看。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.