Css 隐藏部分溢出的元素

我正在寻找一种纯CSS方法来隐藏部分溢出其容器的div3。请参阅附件中的图像

---

希望这对您有所帮助。如果要隐藏它，请使用属性

overflow:hidden

.container{
最大高度：300px；
宽度：500px；
填充：20px；
边框：1px实心#ddd；
溢出：自动；
}
艾尔先生{
填充：10px；
利润率：10px0；
高度：130像素；
边框：1px实心#ddd；
}

第一组
第2组
第3组

.container{
宽度：500px；
高度：800px；
背景颜色：灰色；
边框：1px纯黑；
文本对齐：居中；
溢出：隐藏；
}
.盒子{
显示：内联块；
宽度：400px；
高度：300px；
背景颜色：浅灰色；
利润率：20px 0px；
}

第一组
第2组
第3组

这里有一个可行的解决方案，可以完全隐藏不适合其父项固定高度的项目：

它以一种巧妙的方式使用多列布局：pseudos和

overflow:hidden

作为最后一步。在Fx、Chrome、Edge和IE11上还可以（如果你不使用自定义属性，就像我为了更好地理解而做的那样。预处理器变量就可以了）

• .container

  有一个固定的高度，否则这个问题就没有意义了
• 相同的

  。容器的大小是预期的两倍。它有两列，没有间隙/边沟

• Its:pseudo

  ：after

  存在（半透明番茄斑点），因此被视为此2列布局中要考虑的第4项。其高度为100%=>如果第1列没有足够的空间，则会使第3项占据第2列（第2个示例）
• 父级

  .mask

  具有我们想要的宽度（容器的一半）和

  溢出：隐藏：
  .container
  的第二列被剪裁。您可以删除后一个声明以查看它剪辑了什么

• 利润

：根目录{
--w:40rem；
--p-horiz:1rem；
框大小：边框框；
字体大小：62.5%；
}
* {
框大小：继承；
}
.面具{
宽度：计算值（var（--w））；
溢出：隐藏；/*删除以查看技巧*/
/*填充：0 1rem；否*/
填充：1rem0；
背景色：#aaa；
/*轮廓：1px红色虚线*/
}
.集装箱{
位置：相对位置；
显示：列；
列数：2；
列间距：0；
宽度：计算值（var（--w）*2）；
/*最大-*/高度：25rem；/*最大高度也适用，至少在Fx上*/
字体大小：1.6rem；
}
.货柜：之后{
内容：''；
显示：块；
身高：100%；
背景色：#FF634780；
}
.货柜：在{
内容：''；
位置：绝对位置；
排名：0；
左：0；
z指数：-1；
宽度：50%；
身高：100%；
背景色：#aaa；
}
/* 1. 足够外汇*/
/* 2. 需要铬*/
[class^=“项目-”]{
溢出：隐藏；/*1*/
显示：内联块；/*2*/
宽度：计算值（100%-2*var（-p-horiz））；/*2*/
左边距：var（-p-horiz）；
文本对齐：居中；
背景色：#ddd；
/*轮廓：1px蓝色虚线*/
}
.项目-1{
高度：8雷姆；
}
.项目-2{
身高：4rem；
}
.项目-3{
高度：8雷姆；
背景颜色：浅蓝色；
}
.备选项目-3{
高度：16雷姆；
}
.面具：第一个孩子{
边缘底部：3rem；
}
[class^=“item-”]：不是（：第一个孩子）{
页边顶部：1rem；
}

第一区
第2区
第3区
第一区
第2区
第3区

我们的团队寻找垂直隐藏溢出内容的解决方案

但是，simple

overflow:hidden

不起作用，因为它可以部分隐藏溢出的内容

我们想把它完全隐藏起来

因此，@FelipeAls建议使用css列

是的，它确实有效

视频演示：

JSBIN：

可启动示例

JS-Bin
html，正文{
身高：100%；
宽度：100%；
}
#容器{
填充物：5px；
高度：50px；
调整大小：两者；
/*
将此更改为“可见”以查看其工作方式
*/
溢出：隐藏；
}
#集装箱-2{
身高：100%；
宽度：200%；
列数：2；
列填充：自动；
}
一行
第二线
第三行
第四行

你能提供一个带有标记和特定css的JSFIDLE吗？当div溢出时，你想用css隐藏整个div吗？如果是，这仅在css中是不可能的。@Huelfe是的。而且很狡猾；）没有那么棘手（那是我最后一次说CSS^^中不可能有什么东西）或者你想隐藏整个

div

？是的，隐藏整个div你可能需要使用jQuery或JavaScript来解决它。如果你的元素中有一个非常大的图像，我认为这是行不通的。它只会裁剪图像，我不认为这是理想的行为。基本上，如果div size大于列的大小，它就不起作用。我认为如果你的元素中有一个非常大的图像，这是不起作用的。它只会裁剪图像，我认为这不是期望的行为。