如何强制溢出：隐藏以不使用我的填充正确的空间 [英] How can I force overflow: hidden to not use up my padding-right space

问题描述

我有以下代码：

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

（XHTML 1.0过渡）

(XHTML 1.0 transitional)

发生的是填充权没有出现，它被内容占用，这意味着溢出占用填充右侧空间，并且在填充后只有切断。

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之前溢出，这意味着我的div将与padding一起显示？

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在下面的图片，我想要的是像第二个div：

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

image

推荐答案

隐;遵守所有的填充规则，除了右手边。这个解决方案适用于支持独立透明度的浏览器。

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.

我刚刚更改了CSS：

padding: 20px;
overflow: hidden;

到

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

容器div可以正常工作，但有效地使页面上的div数量翻倍。

Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.

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

Unfortunately, in your case this won't work so well, as you need a real border on the div.

这篇关于如何强制溢出：隐藏以不使用我的填充正确的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！