隱藏部分溢出元素

我正在尋找純粹的CSS方法來隱藏部分溢出其容器的div 3。見附圖。隱藏部分溢出元素

2017-08-25 Jamil

可以爲用戶提供您的標記和具體的CSS的jsfiddle？ – Kathara

你想在css溢出時隱藏整個div嗎？如果是的話，這隻適用於css。 – Huelfe

@Huelfe它是。並且棘手;）不像[多行省略號]（http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/）那樣棘手（這是我最後一次說某件事是不可能的在CSS ^^） – FelipeAls

希望這會幫助你。萬一如果你想隱藏它，使用屬性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>

來源

2017-08-25 07:30:41 Abinthaha

或者你想隱藏整個'div'？ – Abinthaha

是的，隱藏整個div – Jamil

您可能需要使用jQuery或JavaScript來解決它。 – Abinthaha

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

來源

2017-08-25 07:32:12 zynkn

這裏有一個工作的解決方案，將完全隱藏不適合的項目在其母公司的固定高度：Codepen

它以一種棘手的方式使用多列布局：pseudos和overflow: hidden作爲最終的觸摸。 OK對外匯，鉻，EDGE和IE11（如果你不使用自定義屬性爲我做了一個更好的瞭解。預處理程序變量將被罰款）

.container有一個固定的高度，否則這個問題是沒有意義的
相同.container是預期的兩倍大。它有2列沒有間隙/溝槽
它的：僞: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>

來源

2017-08-25 13:28:24 FelipeAls

我們的團隊尋找解決方案上隱藏垂直內容，其溢出

但是，簡單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>

來源

2018-01-22 09:12:33 ColCh

隱藏部分溢出元素

回答

相關問題