CSS：div的文本内容溢出到填充中是不是正确？

Posted 2023-03-06

【中文标题】CSS：div的文本内容溢出到填充中是不是正确？

【英文标题】：CSS: Is it correct that text content of a div overflows into the padding?CSS：div的文本内容溢出到填充中是否正确？

【发布时间】：2011-05-15 19:15:51

【问题描述】：

我希望 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 新手。

【参考方案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;

【参考方案2】：

为此，我创建了两个 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 中添加多少单词，它们都不会部分显示，或者根本不会显示。也可以跨浏览器。

【参考方案3】：

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

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

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

  border: 1px solid green;

希望对你有所帮助。

【参考方案4】：

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

【参考方案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;

【参考方案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.. */

【参考方案7】：

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

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

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

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