正文

隐藏部分溢出的元素

 2023-03-04  277

关键词：

【中文标题】隐藏部分溢出的元素【英文标题】：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>

【讨论】：

CSS：不会破坏 3D 变换的“溢出：隐藏”替代方案

】CSS：不会破坏3D变换的“溢出：隐藏”替代方案【英文标题】：CSS:"overflow:hidden"alternativethatdoesn\'tbreak3Dtransforms【发布时间】：2021-11-2917:24:27【问题描述】：我正在尝试制作具有视差效果的水平部分。在背景中应该有一... 查看详情

csshover显示隐藏visib

display设置或检索对象是否及如何显示。display:none隐藏对象display：block除了转换为块级元素之外，同时还有显示元素的意思。登录后复制特点：display隐藏元素后，不再占有原来的位置。后面应用及其广泛，搭配JS可以做很多的网... 查看详情

uni-app单行文字和多行文字溢出隐藏，溢出部分显示省略号

...ow:ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。查看详情

Chrome和Firefox溢出：隐藏的跳跃元素

】Chrome和Firefox溢出：隐藏的跳跃元素【英文标题】：ChromeandFirefoxoverflow:hiddenjumpingelements【发布时间】：2015-09-0721:30:49【问题描述】：当你有一个带有“position:relative;”的元素时，我偶然发现了Chrome和Firefox中发生的一种奇怪行为... 查看详情

使用overflow:hidden处理元素溢出和坍塌(代码片段)

...父元素赋overflow：hidden样式可将子元素超出父元素的部分隐藏起来。也可为父元素赋overflow：auto或 overflow：scroll 样式来裁剪子元素，使其可通过滚动条查看超出部分。 overflow：auto样式只裁剪超出父元素的长或宽，overf 查看详情

css元素溢出&css显示特性(代码片段)

...ow的设置项：visible默认值,显示子标签溢出部分。hidden隐藏子标签溢出部分。auto如果子标签溢出，则可以滚动查看其余的内容。2.示例代码<style>.box1width:100px;height:200px;background:red;/*在父级上设置子元素溢出的部分如何... 查看详情

CSS溢出隐藏与父元素位置可见的奇怪效果[重复]

】CSS溢出隐藏与父元素位置可见的奇怪效果[重复]【英文标题】：StrangeeffectofCSSoverflowhiddenvs.visibleonpositionofparentelement[duplicate]【发布时间】：2019-12-2904:07:07【问题描述】：我从未读过任何内容表明元素的溢出属性会对我在这里看... 查看详情

为啥溢出：隐藏具有增加高度以包含浮动元素的意外副作用？

】为啥溢出：隐藏具有增加高度以包含浮动元素的意外副作用？【英文标题】：Whydoesoverflow:hiddenhavetheunexpectedside-effectofgrowinginheighttocontainfloatedelements?为什么溢出：隐藏具有增加高度以包含浮动元素的意外副作用？【发布时间】... 查看详情

为啥溢出：隐藏具有增加高度以包含浮动元素的意外副作用？

关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）

1.overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。代码如下： &nbs... 查看详情

css隐藏页面元素方法

一、css隐藏页面盒子overflow:hidden; 隐藏盒子超出的部分,溢出隐藏 position:absolute;/left/top...-999px; 将位置设到不可见区域,隐藏盒子，而且占位置。opacity:0; 　　　　隐藏盒子隐藏之后还占据原来的位置。v... 查看详情

日期选择器部分被溢出-y滚动隐藏

】日期选择器部分被溢出-y滚动隐藏【英文标题】：Datepickerpartiallyhiddenbyoverflow-yscroll【发布时间】：2014-11-0413:07:18【问题描述】：我正在构建一个引导网格列，其中有一个面板。在这个面板中，我有一个日期选择器，并且必须有... 查看详情

React-Native Android 中隐藏的元素溢出

】React-NativeAndroid中隐藏的元素溢出【英文标题】：ElementoverflowhiddeninReact-NativeAndroid【发布时间】：2017-06-1405:13:24【问题描述】：我在这里有一个应用程序，我需要将徽标放在导航栏中。那需要溢出场景布局。在Ios中运行良好，... 查看详情

css之元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

元素的显示与隐藏display显示display设置或检索对象是否及如何显示display:none;隐藏对象display:block;除了转换为块级元素,同时还有显示元素的意思特点：隐藏之后不再保留位置；visibility可见性visibility设置或检索是否显示对象visibility... 查看详情

隐藏的 jQuery 可拖动包含溢出

】隐藏的jQuery可拖动包含溢出【英文标题】：jQueryDraggableContainmentOverflowHidden【发布时间】：2016-05-2512:01:24【问题描述】：这是关于拖动比其父元素更宽的元素（溢出：隐藏）。父级的宽度和溢出选项是固定的，不能更改。HTML<... 查看详情

怎样把标签中溢出的部分隐藏

...以下代码：overflow:hidden;如果要单独控制某一个方向自动隐藏溢出，则可以用如下代码：overflow-x:hidden;横向隐藏overflow-y:hidden;纵向隐藏参考技术B内容溢出时是否隐藏是指插件的内容高度和宽度如果超过插件指定的范围时如何处理... 查看详情

当颤动行小部件中发生溢出时，显示隐藏元素数量的计数器

】当颤动行小部件中发生溢出时，显示隐藏元素数量的计数器【英文标题】：Showcountertonumberofelementshiddenwhenoverflowoccursinflutterrowwidget【发布时间】：2021-05-2803:42:08【问题描述】：谁能帮助实现Gmail的这个功能，当电子邮件列表变... 查看详情

为啥一个元素在“溢出：可见”时消失，但在“溢出：隐藏”时可见？ [复制]

】为啥一个元素在“溢出：可见”时消失，但在“溢出：隐藏”时可见？[复制]【英文标题】：Whyanelementdisappearswith"overflow:visible"butisvisiblewith"overflow:hidden"?[duplicate]为什么一个元素在“溢出：可见”时消失，但在“... 查看详情