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

我有以下代码：如何强制溢出：隐藏不使用我的填充右空间

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

（XHTML 1.0过渡）

什么情况是，填充右没有按不会出现，它被内容占用，这意味着溢出使用了填充右侧空间并且仅在填充后“截断”。

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

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

image

来源

2009-07-02 AlfaTeK

答案CSS总是用另一种包装 – neaumusic 2016-09-30 22:15:17

我有溢出相同的问题：隐藏;服从所有的填充规则，除了右手边。该解决方案适用于支持独立不透明的浏览器。

我只是改变了我的CSS来自：

padding: 20px; 
overflow: hidden;

到

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

有div容器正常工作，但实际上是一个网页，感觉多余的双打div的量。

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

来源

2010-04-21 14:01:09 theorise

您最好的选择是使用包装DIV并设置填充上。

来源

2009-07-02 00:20:09 Obfuskater

这是一个简单的解决方案迷人。:) – Nanu 2013-07-11 23:34:12

这个答案几乎肯定比当前选择的更有效。 – 2015-12-28 15:53:11

我有一个类似的问题，我通过使用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>

来源

2012-02-02 09:08:28 heldinz

如果您有问题的右侧相邻元素，请在其左侧填充填充。这样，来自左侧元素的内容将流向但不超过其边缘，并且右侧相邻元素上的左侧填充将创建所需的分隔。您可以将此技巧用于一系列水平元素，这些元素可能会因为太长而需要中断内容。

来源

2012-03-19 20:44:52

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

来源

2015-03-30 17:26:14 tic

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

回答

相关问题