我如何强制溢出：隐藏起来以至于不占用我的右填充空间

Question

我有以下代码：

<div style="width: 100px; 
overflow: hidden; 
border: 1px solid red; 
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>

（（XHTML 1.0过渡版）

发生的情况是，padding-right没有出现，而是被内容占据了，这意味着溢出会占用padding right的空间，并且仅在padding之后才“切断”。

是否有任何方法可以迫使浏览器在填充右移之前溢出，这意味着我的div将以填充右移显示？

我得到的是下图中的第一个div，我想要的是类似第二个div的东西：

image

Answer 1

我对overflow有相同的问题：隐藏；遵守除右侧以外的所有填充规则。该解决方案适用于支持独立不透明度的浏览器。

我刚刚从以下位置更改了CSS：

padding: 20px;
overflow: hidden;

to

padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);

具有容器div可以很好地工作，但是实际上使页面上的div数量增加了一倍，这是不必要的。

不幸的是，由于您需要在div上使用真实的边框，因此在您的情况下，效果不太好。

Answer 2

您最好的选择是使用环绕div并在其上设置填充。

Answer 3

我有一个类似的问题，我使用clip而不是overflow解决了。这使您可以指定div（W3C Recommendation）可见区域的矩形尺寸。在这种情况下，您应该仅指定填充内的可见区域。

Answer 4

包装div并将填充应用于父级

Answer 5

如果您有一个与之相邻的元素，请在其左侧放置填充。这样，来自左元素的内容将流到但不超过其边距，并且在右相邻元素上的左填充将创建所需的分隔。您可以对一系列水平元素使用此技巧，因为水平元素太长，可能需要将其内容切除。