我预计div内的填充将保持清除任何文本。但是给出以下html / css,内容文本会溢出到填充中;
<div class="foo">helloworld</div> .foo { float: left; overflow: hidden; background: red; padding-right: 10px; width: 50px; border: 1px solid green; }@H_404_4@该文本的大小为50px,并以10px的宽度填充。是设计吗如果是这样,似乎很笨 – 如果填充内容,填充不是填充!还是我只是做错了? @H_404_4@问候,CSS新手。
解决方法
这是正确的行为。 overflow:hidden将剪辑外部扩展的内容。填充在盒子里面,所以如果需要,内容将会愉快地溢出到这个空间。
@H_404_4@(source)
@H_404_4@为了获得你似乎正在瞄准的效果,一个解决方案是将div.foo包装在另一个div中,然后设置背景,如下所示:
<div class="foowrapper"> <div class="foo">purrrrrrrrr</div> </div> .foo { overflow: hidden; width: 40px; } .foowrapper { padding-right: 10px background: red; border: 1px solid green; }