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

希望对你有所帮助。

Answer 3

为此，我创建了两个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>

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

Answer 4

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

Answer 5

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

如果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时，内容应该在到达填充时隐藏。

这是一个黑客，如果你想要一个边框不起作用，但可能对某些人（我）：使用边框作为填充。

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

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