如何强制溢出：隐藏以不使用我的填充空间答案

【问题标题】：How can I force overflow: hidden to not use up my padding-right space如何强制溢出：隐藏以不使用我的填充空间
【发布时间】：2020-03-03 22:23:58
【问题描述】：

我有以下代码：

<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之后才“切断”。

有没有办法强制浏览器在padding-right之前溢出，这意味着我的div会显示padding right？

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

image

【问题讨论】：

标签： html css xhtml

【解决方案1】：

我对溢出有同样的问题：隐藏；遵守所有的填充规则，除了右手边。此解决方案适用于支持独立不透明度的浏览器。

我刚刚更改了我的 CSS：

padding: 20px;
overflow: hidden;

到

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

拥有容器 div 可以正常工作，但这实际上会使页面上的 div 数量翻倍，这感觉没有必要。

不幸的是，在你的情况下，这不会很好，因为你需要一个真正的 div 边框。

【讨论】：

很好的解决方案。唯一的问题是我已经在使用border属性来添加一个1px的边框，所以这在我的特殊情况下不起作用。
Aaron，只需添加一个额外的 div 作为内部包装器
或使用 1px div 作为边框

【解决方案2】：

最好的办法是使用包装 div 并在其上设置填充。

【讨论】：

这个答案几乎可以肯定比当前选择的答案更有效。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

如果你有一个右相邻的元素，把填充放在它的左边。这样，来自左侧元素的内容将向上流动但不会超过其边距，并且右侧相邻元素上的左侧填充将创建所需的分隔。您可以将这个技巧用于一系列水平元素，这些元素可能具有因太长而需要截断的内容。

【讨论】：