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.

（source）

为了获得你想要的效果，一个解决方案是将你的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屋！