Question

我正在寻找一种纯CSS方法来隐藏部分溢出其容器的div 3。见附图。

Answer 1

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

它以一种棘手的方式使用多列布局：伪和overflow: hidden作为最后的触摸。在Fx，Chrome，Edge和IE11上都可以（如果你不像我那样使用自定义属性以便更好地理解。预处理器变量就可以了）

.container有一个固定的高度，否则问题毫无意义
相同.container是预期的两倍。它有2列没有间隙/沟槽
它的：伪:after存在（透明的番茄blob），因此被认为是这个2列布局中要考虑的第4项。它的高度是100％=＆gt;如果第1列没有足够的空间（第2个例子），则第3个项目占据第2列
父{1}}具有我们想要的宽度（.mask的一半）和.container：overflow: hidden的第二列被剪裁。您可以删除后一个声明以查看其剪辑内容
...
利润！

＆＃13;

.container

＆＃13;

:root {
  --w: 40rem;
  --p-horiz: 1rem;
  box-sizing: border-box;
  font-size: 62.5%;
}

* {
  box-sizing: inherit;
}

.mask {
  width: calc(var(--w));
  overflow: hidden; /* REMOVE to see the trick */
  /*padding: 0 1rem; NOPE */
  padding: 1rem 0;
  background-color: #aaa;
  /*outline: 1px dashed red;*/
}

.container {
  position: relative;
  display: column;
    column-count: 2;
    column-gap: 0;
  width: calc(var(--w) * 2);
  /*max-*/height: 25rem; /* max-height also work, at least on Fx */
  font-size: 1.6rem;
}

.container:after {
  content: '';
  display: block;
  height: 100%;
  background-color: #FF634780;
}

.container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 50%;
  height: 100%;
  background-color: #aaa;
}

/* 1. Sufficient for Fx */
/* 2. Needed for Chrome */
[class^="item-"] {
  overflow: hidden; /* 1. */
  display: inline-block; /* 2. */
  width: calc(100% - 2 * var(--p-horiz)); /* 2. */
  margin-left: var(--p-horiz);
  text-align: center;
  background-color: #ddd;
  /*outline: 1px dashed blue;*/
}

.item-1 {
  height: 8rem;
}

.item-2 {
  height: 4rem;
}

.item-3 {
  height: 8rem;
  background-color: lightblue;
}

.alt .item-3 {
  height: 16rem;
}

.mask:first-child {
  margin-bottom: 3rem;
}

[class^="item-"]:not(:first-child) {
  margin-top: 1rem;
}

＆＃13;

Answer 2

希望这会对你有所帮助。如果您想隐藏它，请使用属性overflow: hidden

.container {
  max-height: 300px;
  width: 500px;
  padding: 20px;
  border: 1px solid #ddd;
  overflow: auto;
}
.el {
  padding: 10px;
  margin: 10px 0;
  height: 130px;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="el">Div 1</div>
  <div class="el">Div 2</div>
  <div class="el">Div 3</div>
</div>

Answer 3

＆＃13;

.container{
  width: 500px;
  height: 800px;
  background-color: gray;
  border:1px solid black;
  text-align: center;
  overflow: hidden;
}

.box{
  display: inline-block;
  width: 400px;
  height: 300px;
  background-color: lightgray;
  margin: 20px 0px;
}

＆＃13;

<div class="container">
  <div class="box">div 1</div>
  <div class="box">div 2</div>
  <div class="box">div 3</div>
</div>

＆＃13;

Answer 4

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

但是，简单的overflow: hidden不会起作用，因为它可以部分隐藏溢出的内容。

我们想完全隐藏它。

所以，@ FelipeAls建议使用css列

是的，它确实有效

视频演示：https://streamable.com/3tdc8

JSBIN ：http://jsbin.com/fumiquhoxo/2/edit?html,css,output

可启用示例

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
    html, body {
        height: 100%;
        width: 100%;
    }

    #container {
        padding: 5px;
        height: 50px;
        resize: both;
        
        /*
        Change this to "visible" to see how it works
        */
        overflow: hidden;
    }

    #container-2 {
        height: 100%;
        width: 200%;
        column-count: 2;
        column-fill: auto;
    }
</style>
</head>
<body>
<div id="container" style="width: 150px; outline: 1px red solid;">
    <div id="container-2">
        <div>ONE LINE</div>
        <div>SECOND LINE</div>
        <div>THIRD LINE</div>
        <div>FOURTH LINE</div>
    </div>
</div>
</body>
</html>

＆＃13;

隐藏部分溢出的元素

4 个答案: