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

Question

我希望 div 内的填充不会有任何文本。但是给定以下 html/css，内容文本溢出到填充中；

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 50px;
  border: 1px solid green;
}

文本溢出 50px 大小并进入 10px 填充。这是设计使然吗？如果是这样的话，它看起来很愚蠢——如果里面有东西，填充就不是填充了!或者我只是做错了什么？

问候，CSS 新手。

Answer 1

这是正确的行为。 overflow: hidden 将剪切超出框 的内容。填充位于框内，因此内容会在必要时愉快地溢出到该空间。

(source)

为了达到您想要的效果，一种解决方案是将您的 div.foo 包裹在另一个 div 中，然后在该 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;
}