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;
}

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

问候，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;
}

Answer 2

为此，我创建了两个 div：一个主要的，一个包装的。我最终定义了内部主 div 的高度并隐藏溢出，它解决了问题。代码如下：

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>

包装器具有填充和边框（以及其他属性）。 main 具有高度和溢出属性 - 这些是解决问题的方法。随意测试一下，您会发现无论向主 div 添加多少单词，它们都不会部分显示，或者根本不会显示。跨浏览器也是如此。

Answer 3

这是因为您将 div 的宽度限制为 50px，导致文本溢出到填充中。删除该宽度语句，div 将根据其中 txt 的大小进行扩展和收缩。

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

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

  border: 1px solid green;
}

希望对您有帮助。

Answer 4

我能看到这个工作的唯一方法是摆脱宽度：50px...除了我难倒的！？

Answer 5

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

如果有任何元素出现在 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;

}

Answer 6

我刚刚也遇到了这个问题，并且不喜欢它的工作方式。无论猫有多大，填充物始终位于它和盒子之间！因此，当使用overflow:hidden时，内容到达padding时应该被隐藏。

如果您想要边框，这里有一个不起作用的技巧，但可能对某些人（我）有用：使用边框作为填充。

<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.. */
}

Answer 7

这是设计使然，因为 overflow:hidden 使用边框作为其剪辑，因此内容将流入填充中。

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

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

您必须调整边距和填充来解决这个问题，但这是迄今为止我发现的最轻松的解决方案。