是否只有CSS才能完全隐藏部分溢出的元素? [英] Is there a CSS only way to completely hide elements that partially overflow?

问题描述

想象一下，您有一个元素的高度是浏览器窗口高度的百分比.该元素包含一堆块元素.

Imagine you have an element that has a height that is a percentage of the browser window height. This element contains a bunch of block elements.

是否可以使用类似 overflow:hidden 的方法，但要确保最后一个块元素完全隐藏，而不是如果溢出则部分隐藏?

Is there a way to use something like overflow: hidden but make sure that the last block element is completely hidden instead of partially hidden if it overflows?

(使用JavaScript相当容易，但是我更喜欢用样式表来解决.)

(This is pretty easy to do with JavaScript, but I'd prefer to solve this with the stylesheet.)

推荐答案

在2013年是不可能的，但是现在所有IE< = 10都已消失，我们可以使用flexbox.

It wasn't possible in 2013, but now all IE<=10 are dead, we can use flexbox.

基本思想是将弹性项目包装在可见区域之外.

The basic idea is to wrap flex items out of visible area.

删除溢出:隐藏； 以查看项目所在的位置.

Remove overflow: hidden; to see where the items go.

$('.parent').ready(function() {
  $('.parent').resizable();
})

* {
  box-sizing: border-box;
}
.parent {
  height:288px;
  width: 233px;
  border: 5px dashed blue;
  background: yellow;
  
  display: flex;
  flex-flow: column wrap;
  overflow: hidden;
}

.child {
  height: 100px;
  width: 100%;
  border: 5px solid brown;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="parent">
<div class="child">0</div>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>

这篇关于是否只有CSS才能完全隐藏部分溢出的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！