隐藏部分溢出的元素
Posted
技术标签:
【中文标题】隐藏部分溢出的元素【英文标题】：Hide partially overflown elements 【发布时间】：2018-02-03 04:53:04 【问题描述】：我正在寻找一种纯 CSS 方法来隐藏已部分溢出其容器的 div 3。见附图。
【问题讨论】：
你能提供一个带有你的标记和特定 css 的 jsfiddle 吗？ 当它溢出时你想用css隐藏整个div？如果是，则仅使用 css 是不可能的。 @Huelfe 是的。而且很棘手；）虽然不像multiline ellipsis那么棘手（那是我最后一次说CSS中不可能有什么东西^^） 直接的 JS 解决方案也适用于这里 - ***.com/a/2583281/6344916 【参考方案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>【讨论】：
以上是关于隐藏部分溢出的元素的主要内容，如果未能解决你的问题，请参考以下文章
position:absolute相对于谁定位以及当溢出时怎么隐藏