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将剪辑扩展到框外的内容.填充在框内,因此如果需要,内容将很快溢出到该空间.

(资源)

为了获得你似乎想要的效果,一个解决方案是将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;
}

Answer 2

这是因为您已将div的宽度约束为50px,导致文本溢出到填充中.删除该宽度语句,div将扩展和收缩其中的txt大小.

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

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;

  border: 1px solid green;
}

希望对你有所帮助.