Html 如何强制溢出：隐藏以不使用我的填充右空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1071927/
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
How can I force overflow: hidden to not use up my padding-right space
提问by AlfaTeK
I have the following code:
我有以下代码：
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
（XHTML 1.0 过渡）
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
发生的情况是 padding-right 没有出现，它被内容占用，这意味着溢出会用完 padding right 空间，并且只在 padding 之后“切断”。
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
有什么办法可以强制浏览器在 padding-right 之前溢出，这意味着我的 div 会以 padding right 显示吗？
What I get is the first div in the following image, what i want is something like the 2nd div:
我得到的是下图中的第一个 div，我想要的是第二个 div：
回答by theorise
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
我对溢出有同样的问题：隐藏；遵守所有的填充规则，除了右手边。此解决方案适用于支持独立不透明度的浏览器。
I just changed my CSS from:
我刚刚改变了我的 CSS：
padding: 20px;
overflow: hidden;
to
到
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
拥有容器 div 效果很好，但这实际上会使页面上的 div 数量增加一倍，这感觉没有必要。
Unfortunately, in your case this won't work so well, as you need a real border on the div.
不幸的是，在您的情况下，这不会很好地工作，因为您需要在 div 上有一个真正的边框。
回答by Obfuskater
Your best bet is to use a wrapping div and set the padding on that.
最好的办法是使用包装 div 并在其上设置填充。
回答by heldinz
I had a similar problem that I solved by using clipinstead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
我有一个类似的问题，我通过使用clip而不是overflow. 这允许您指定 div 可见区域的矩形尺寸（W3C 建议）。在这种情况下，您应该只指定内边距内可见的区域。
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clipto apply, you would need to know and specify the height on the wrapper div.
对于这种情况，这可能不是一个完美的解决方案：由于 div 的边框在剪切区域之外，它也会变得不可见。我通过添加一个包装 div 并在其上设置边框来解决这个问题，但由于内部 div 必须绝对定位clip才能应用，因此您需要知道并指定包装 div 上的高度。
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
回答by tic
Wrap the div and apply padding to the parent
包裹 div 并将填充应用于父级
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>回答by Hyman Herr
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.
如果您有相关元素的右邻元素，请将填充放在其左侧。这样，来自左侧元素的内容将向上流动但不会超过其边距，并且右侧相邻元素上的左侧填充将创建所需的分隔。您可以将这个技巧用于一系列水平元素，这些元素可能包含因为太长而需要截断的内容。
