CSS:div的文本内容溢出到padding中是否正确?

这是正确的行为。 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;
}

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

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

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

  border: 1px solid green;
}

希望这对你有帮助。

为此,我创建了两个div:一个主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有一个height和overflow属性-这些是解决问题的属性。请随意测试,您将看到,无论主div中添加了多少单词,它们都不会部分显示,或者根本不会显示。跨浏览器也一样。

我能看到这个工作的唯一方法是去掉宽度:50像素…除了我难住的!?

另一种方法是使用右轮廓作为伪填充。 首先,将元素的宽度减少10像素(以说明轮廓将向前延伸的额外量)。 然后在元素的右边添加一个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;

}

我也刚碰到这个问题,不喜欢它的工作方式。不管猫有多大,填充物总是在它和盒子之间!因此,当使用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.. */
}

它的设计是 overflow: hidden 使用边框作为剪辑,以便内容将流入填充。

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

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

你将不得不调整边距和填充来解释这一点,但这是迄今为止我发现的最痛苦的解决方案。