Question

假设我有一个“div”元素，并为其分配了边框。如果它的溢出规则设置为“隐藏”，则“div”边框上的内容将消失。

有没有办法克服这个问题？因为在我的场景中，边框上的内容不会消失是非常重要的。我也需要元素的边界来包含边框。

Answer 1

我相信需要三个div's来实现这一目标（也许有人可以提出两个div解决方案）。这是an example fiddle。三个嵌套的div元素（这里的外部有.CropIt类）：

<强> CSS

.CropIt {
    overflow: hidden;
    width: 60px;
}

.CropIt > div {
    border: 20px solid red;
    width: 20px;
}

.CropIt > div > div {
    margin: -20px;
}

外部设置溢出以隐藏隐藏的边框。中间设置宽度和边框（外部必须匹配总宽度或使用float来缩小包装）。最里面的集合是将内容推到中间边界上的负边距，并创建边框与中间div的重叠。

Answer 2

我认为在你的div附近添加一个padding会保存你的边框。我为你创造了Check this jsfiddle。

CSS溢出规则包括对象边框？

2 个答案: