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

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:

图片

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并在其上设置填充.