我怎么能强制溢出：隐藏不要用尽我的填充权限空间

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没有出现，它被内容占用，这意味着溢出使用了填充右边空间并且只在填充后“切断”。

Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?

有没有办法强制浏览器在填充权限之前溢出，这意味着我的div将显示填充权限？

What I get is the first div in the following image, what i want is something like the 2nd div:

我得到的是下图中的第一个div，我想要的是像第二个div：

image

图片

5 个解决方案

#1

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;

至

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上有一个真正的边框。

#2

Your best bet is to use a wrapping div and set the padding on that.

你最好的选择是使用包装div并在其上设置填充。

#3

I had a similar problem that I solved by using clip instead 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.

我有一个类似的问题，我通过使用剪辑而不是溢出来解决。这允许您指定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 clip to apply, you would need to know and specify the height on the wrapper div.

对于这种确切的情况，这可能不是一个完美的解决方案：因为div的边界在剪切区域之外，所以也将变得不可见。我通过添加一个包装器div并在其上设置边框来解决这个问题，但由于内部div必须绝对定位以便应用剪辑，因此您需要知道并指定包装器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>

#4

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>

#5

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.

如果您有一个与相关元素相邻的元素，请在其左侧添加填充。这样，来自左边元素的内容将向上流动但不超过其边距，右边相邻元素上的左边距将创建所需的分隔。您可以将此技巧用于一系列水平元素，这些元素可能具有需要被切断的内容，因为它太长。

#1