Question

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

有没有办法使用像overflow: hidden这样的东西，但要确保最后一个块元素是完全隐藏的，而不是在它溢出时部分隐藏？

（这很容易用JavaScript做，但我更喜欢用样式表来解决这个问题。）

Answer 1

2013年不可能，但现在所有IE＆lt; = 10都已死，我们可以使用flexbox。

基本思想是将柔性物品包裹在可见区域之外。

删除overflow: hidden;以查看商品的去向。

$('.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>

Answer 2

好吧，除非你恰好只为早期的Internet Explorer版本开发（使用expression（）），否则基本上没有办法用纯CSS做到这一点。

基本上，不再可能在样式表中运行javascript（这是你在样式表中完成所有操作的唯一选择）。

虽然在Jquery中做起来并不困难： http://jsfiddle.net/bernie1227/wCx9N/

此解决方案基本上只使用：

pageWidth - (elementWidth + elementLeft) < 0

为了检查元素是否溢出。

有没有CSS唯一的方法来完全隐藏部分溢出的元素？

2 个答案: