隐藏部分溢出的元素答案

【问题标题】：Hide partially overflown elements隐藏部分溢出的元素
【发布时间】：2018-02-03 04:53:04
【问题描述】：

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

【问题讨论】：

你能提供一个带有你的标记和特定 css 的 jsfiddle 吗？
当它溢出时你想用css隐藏整个div？如果是，则仅使用 css 是不可能的。
@Huelfe 是的。而且很棘手；）虽然不像multiline ellipsis那么棘手（那是我最后一次说CSS中不可能有什么东西^^）
直接的 JS 解决方案也适用于这里 - stackoverflow.com/a/2583281/6344916

标签： css

【解决方案1】：

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

它以一种棘手的方式使用多列布局，最后使用 :pseudos 和 overflow: hidden。可以在 Fx、Chrome、Edge 和 IE11 上使用（如果您不使用自定义属性，我会更好地理解。预处理器变量会很好）

.container 有一个固定的高度，否则这个问题没有意义
Same .container 是预期的两倍。它有 2 列，没有间隙/排水沟
它的 :pseudo :after 存在（半透明的番茄斑点），因此被认为是此 2 列布局中要考虑的第 4 项。它的高度是 100% => 如果第一列没有足够的空间，它会使第三项占据第二列（第二个示例）
父.mask 具有我们想要的宽度（.container 的一半）和overflow: hidden：.container 的第二列被剪裁。您可以删除后面的声明以查看它剪辑的内容
…
利润！

: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;
}

<div class="mask">
  <div class="container">
    <div class="item-1">Block 1</div>
    <div class="item-2">Block 2</div>
    <div class="item-3">Block 3</div>
   </div>
</div>

<div class="mask">
  <div class="container alt">
    <div class="item-1">Block 1</div>
    <div class="item-2">Block 2</div>
    <div class="item-3">Block 3</div>
   </div>
</div>

【讨论】：

如果你有一个非常大的图像作为你的元素之一，我认为这不起作用。它只会裁剪图像，我认为这不是所需的行为。
基本上，如果你的 div 大小大于你的列的大小，它就不起作用了。

【解决方案2】：

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

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

我们想完全隐藏它。

所以，@FelipeAls 建议使用 css 列

是的，它确实有效

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

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

可启动示例

<!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>

【讨论】：

如果你有一个非常大的图像作为你的元素之一，我认为这不起作用。它只会裁剪图像，我认为这不是所需的行为。

【解决方案3】：

希望这会对您有所帮助。如果你想隐藏它，使用属性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>

【讨论】：

或者你想隐藏整个div？
是的，隐藏整个div
您可能需要使用jQuery或JavaScript来解决它。

【解决方案4】：

.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;
}

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

【讨论】：