CSS：div的文本内容是否会溢出到填充区域中？

Question

我本以为在一个div内部设置了padding后，文本内容就不会覆盖到padding上。但是在下面的html/css代码中，文本却溢出到了padding区域。

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

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

文本超出了50像素的大小并进入了10像素的填充区域。 这是设计上的问题吗？ 如果是，那么这似乎非常愚蠢 - 如果填充区域里有东西，那么它就不再是填充区域了！ 或者我做错了什么吗？

敬礼，CSS 新手。

- Nigel Alderton

Answer 1

这是正确的行为。 overflow: hidden会裁剪超出盒子范围的内容。填充在盒子内部，所以如果需要的话，内容将愉快地溢出到那个空间中。

(来源)

要实现您似乎想要的效果，一种解决方法是将div.foo包装在另一个

中，并在其中设置背景，像这样：

<div class="foowrapper">
    <div class="foo">purrrrrrrrr</div>
</div>

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

- Brant Bobby

---

猫样式表 - NHerwich

Answer 2

为了做到这一点，我创建了两个div：一个主要的，一个包装器。最终我定义了内部主div的高度并隐藏了overflow，问题得到解决。以下是代码:

div.wrap {
  padding: 10px 10px 14px 10px;
  border:1px solid #000000;
  width: 200px;
  height: 70px; 
 }
div.main { 
  line-height: 1.3em;
  overflow:hidden; 
  width: 200px;
  height: 60px; /* PLAY WITH THE HEIGHT so that you can essentially use it to cover up the overflow */
 }

  <div class="wrap"><div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>

外层包裹器具有填充和边框等属性。主要部分具有高度和溢出属性 - 这些是解决问题的关键。随意测试，您会发现无论将多少字添加到主要div中，它们都不会被部分或完全显示。跨浏览器也可以。

- seon

Answer 3

由于您将div的宽度限制为50px，导致文本溢出到填充区域。删除该宽度语句，div将根据其中的文本大小而扩展和收缩。

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

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

  border: 1px solid green;
}

希望这能帮到您。

- wilsonpage

Answer 4

我唯一能想到的解决方法就是去掉"width:50px"这个属性...除此之外我就卡住了！

- benhowdle89

Answer 5

我也遇到了这个问题，不喜欢它的工作方式。无论猫变得多大，填充区域始终在它和盒子之间！因此，在使用overflow：hidden时，当内容到达填充区域时应该隐藏它。

以下是一个技巧，如果您想要边框，则无法工作，但对于某些情况可能有用（对我来说）：将边框用作填充。

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

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 0; /* Removed the padding. */
  width: 50px;
  border-right: 10px solid red; /* 10px, background color or transparent. */
  box-sizing: border-box; /* I prefer this one too.. */
}

- LGT

Answer 6

另一种方法是使用outline-right作为伪填充。首先将元素的宽度减少10px（以便考虑到轮廓线额外延伸的量）。然后在元素上添加一个10px实心红色的outline-right。轮廓线将覆盖任何“隐藏”的文本。

如果在foo右侧出现任何元素，请确保将其右边距增加10px（因为轮廓线不会像普通宽度扩展那样将它们推开）。

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

}

- user1050268

Answer 7

这是设计上的考虑，因为overflow: hidden使用边框作为其剪辑区域，所以内容会流入填充区。

您可以在此处使用与背景相同颜色的盒子阴影来生成一些虚假的填充，使文本不会流入其中。

box-shadow: 0px 0px 0px 5px black;

你需要调整边距和填充来解决这个问题，但这是我目前找到的最简单的解决方案。

- mcphylus12