CSS：div 的文本内容溢出到填充中是否正确？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4278930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Is it correct that text content of a div overflows into the padding?
提问by Nigel Alderton
I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding;
我希望 div 内的填充不会出现任何文本。但是鉴于以下 html/css，内容文本会溢出到填充中；
<div class="foo">helloworld</div>
.foo {
float: left;
overflow: hidden;
background: red;
padding-right: 10px;
width: 50px;
border: 1px solid green;
}
The text overflows it's 50px size and into the 10px padding. Is that by design? If so it seems pretty dumb - padding isn't padding if it's got stuff in it! Or am I just doing something wrong?
文本溢出它的 50px 大小并进入 10px 填充。这是设计的吗？如果是这样，它看起来很愚蠢 - 如果里面有东西，填充就不是填充！还是我只是做错了什么？
Regards, CSS newbie.
问候，CSS 新手。
回答by Brant Bobby
This is the correct behavior. overflow: hiddenwill clip content that extends outside the box. Padding is insidethe box, so content will happily overflow into that space if necessary.
这是正确的行为。overflow: hidden将剪辑延伸到框外的内容。填充在盒子里面，所以如果有必要，内容会很高兴地溢出到那个空间。
To get the effect you seem to be aiming for, one solution is wrap your div.foo in an another div and set the background on that one instead, like this:
为了获得您似乎想要的效果，一种解决方案是将您的 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;
}
回答by wilsonpage
It is because you have constrained the width of the div to 50px causing the text to spill into the padding. Remove that width statement and the div will expand and contract with the size of the txt within it.
这是因为您将 div 的宽度限制为 50px，导致文本溢出到填充中。删除该宽度语句，div 将根据其中的 txt 大小进行扩展和收缩。
<div class="foo">helloworld</div>
.foo {
float: left;
overflow: hidden;
background: red;
padding-right: 10px;
border: 1px solid green;
}
Hope that helps you.
希望能帮到你。
回答by seon
To do this, I created two divs: one main one, and one wrapper. I ended up defining a height for the inner main div and hiding overflow, and it solved the problem. Here is the code:
为此，我创建了两个 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>
The wrapper has the padding and the border (among other attributes). The main has a height and the overflow attribute - these are the ones that solve the problem. Feel free to test and you'll see that no matter how many words are added to the main div, they will not be shown partially, or at all. Cross-browser, too.
包装器具有填充和边框（以及其他属性）。main 有一个 height 和 overflow 属性 - 这些是解决问题的。随意测试，您会发现无论向主 div 添加多少单词，它们都不会部分显示，或者根本不会显示。跨浏览器也是。
回答by benhowdle89
The only way i could see this working is by getting rid of the width: 50px...other than that i stumped!?
我能看到这个工作的唯一方法是摆脱宽度：50px ...除了我难倒之外！？
回答by user1050268
Another approach is to use an outline-right as a pseudo-padding. First reduce the width of your element by 10px (to account for the extra amount the outline will extend forth). Then add a 10px solid red outline-right to your element. The outline will cover any 'hidden' text.
另一种方法是使用轮廓权作为伪填充。首先将元素的宽度减少 10 像素（以考虑轮廓将向外延伸的额外量）。然后为您的元素添加一个 10 像素的纯红色轮廓线。大纲将涵盖任何“隐藏”文本。
If there are any elements that appear to the right of foo, be sure to add 10px to its right margin (because the outline will not push them aside like a normal width extension would).
如果有任何元素出现在 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;
}
回答by LGT
I just ran into this issue as well and don't like the way it works. No matter how large the cat gets, the padding will always be between it and the box! Therefore, when using overflow: hidden, the content should be hidden when it reaches the padding.
我也刚遇到这个问题，不喜欢它的工作方式。不管猫有多大，填充物总是在它和盒子之间！因此，当使用overflow: hidden 时，当内容到达padding 时应该隐藏。
Here's a hack that doesn't work in case you want a border, but might for some (me): use the borders as 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.. */
}
回答by mcphylus12
It is by design as overflow: hiddenuses the border as its clip so contents will flow into the padding.
它设计为overflow: hidden使用边框作为其剪辑，因此内容将流入填充。
You can use a box-shadow here that is the same color as your background to generate some fake padding that the text won't flow into.
您可以在此处使用与背景颜色相同的框阴影来生成一些文本不会流入的假填充。
box-shadow: 0px 0px 0px 5px black;
You'll have to adjust margins and padding to account for this but its the most painless solution I've found so far.
您必须调整边距和填充来解决这个问题，但这是迄今为止我发现的最轻松的解决方案。
