CSS:是否正确的div的文本内容溢出到填充?

前端之家收集整理的这篇文章主要介绍了CSS:是否正确的div的文本内容溢出到填充?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我预计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;
}

猜你在找的CSS相关文章