CSS:div的文本内容是否溢出到填充中是正确的吗? [英] CSS: Is it correct that text content of a div overflows into the padding?
问题描述
我预计div内的填充将保持清除任何文本。但是给定以下html / css,内容文本溢出到填充中;
I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding;
<div class="foo">helloworld</div>
.foo {
float: left;
overflow: hidden;
background: red;
padding-right: 10px;
width: 50px;
border: 1px solid green;
}
文本溢出为50px大小,是设计?如果这样,看起来很蠢 - 填充不是填充,如果它有东西在它!或者我只是做错了什么?
The text overflows it's 50px size and into the 10px padding. Is that by design? If so it seems pretty dumb - padding isn't padding if it's got stuff in it! Or am I just doing something wrong?
回答,CSS新手。
推荐答案
。 overflow:hidden
会剪辑延伸到方框之外的内容。填充在 框内,因此如果需要,内容将很快溢出到该空间。
This is the correct behavior. overflow: hidden
will clip content that extends outside the box. Padding is inside the box, so content will happily overflow into that space if necessary.
为了获得你想要的效果,一个解决方案是将你的div.foo另一个div,并设置背景上的那个,如下:
To get the effect you seem to be aiming for, one solution is wrap your div.foo in an another div and set the background on that one instead, like this:
<div class="foowrapper">
<div class="foo">purrrrrrrrr</div>
</div>
.foo {
overflow: hidden;
width: 40px;
}
.foowrapper {
padding-right: 10px
background: red;
border: 1px solid green;
}
这篇关于CSS:div的文本内容是否溢出到填充中是正确的吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!