Question

我有以下代码：

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

（XHTML 1.0过渡期）

发生的事情是padding-right没有出现，它被内容占用，这意味着溢出占用了填充权限空间，并且只在填充后“切断”。

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

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

image

Answer 1

我遇到与溢出相同的问题：隐藏;遵守所有填充规则，右边除外。此解决方案适用于支持独立不透明度的浏览器。

我刚刚改变了我的CSS：

padding: 20px;
overflow: hidden;

到

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）。在这种情况下，您应该仅指定填充内的区域可见。

对于这种确切的情况，这可能不是一个完美的解决方案：因为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>

Answer 4

包裹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>

Answer 5

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

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

5 个答案: