1
A
答えて
0
が、これはあなたを助けることを願っています。あなたはそれを非表示にする場合場合は、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>
0
.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>
1
プロパティを使用してここで完全に収まらない項目を非表示にしますワーキングソリューションですその親の固定高さで：Codepen
多目的レイアウトでは：pseudosとoverflow: hiddenが最終的なタッチとして使用されます。 OK Fxの、クロム、エッジ及びIE11に（私はより良く理解するために行ったように、あなたは、カスタムプロパティを使用しない場合。プリプロセッサ変数は罰金になります）
.container固定の高さを持っているそう質問は意味をなさない- 同じ
.containerが予想より2倍大きい。隙間/隙間のない2つの列を有する - その：擬似
:after（半透明トマトの塊）が存在し、この2列のレイアウトで考慮される第4の項目と考えられる。その高さは100％=>第1列（第2の例）に十分な空きがない場合、第3のアイテムが第2列を占めるようにする。 - 親
.maskは希望の幅（.containerの半分）とoverflow: hidden：.containerの2番目の列がクリップされます。後の宣言を削除して、クリップの内容を確認することができます - ...
- 利益！
: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>
0
私たちのチーム、それは部分的に溢れた内容を隠すことができるので、動作しません
をオーバーフローしかし、簡単な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>
あなたのマークアップと、特定のCSSでjsfiddleを提供することができますか？ – Kathara
オーバーフローしたときにcssでdiv全体を非表示にしたいですか？はいの場合、これはCSSのみでは不可能です。 – Huelfe
@Huelfeです。トリッキー;）でも、[multiline省略]（http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/）と同じくらいトリッキーではありません。（これは私が何かができないと言った最後の時間でしたCSSで^^） – FelipeAls