css - 是否有唯一的 CSS 方法来完全隐藏部分溢出的元素？

Question

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

有没有办法使用类似overflow: hidden但确保最后一个块元素在溢出时完全隐藏而不是部分隐藏？

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

Answer 1

这在 2013 年是不可能的，但现在所有 IE<=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

好吧，基本上没有办法用纯 CSS 来做到这一点，除非你碰巧只为早期的 Internet Explorer 版本进行开发（使用表达式（））。

基本上，不再可能在样式表中运行 javascript（这实际上是您在样式表上执行所有这些操作的唯一选择）。

不过，在 Jquery 中做起来并不难：http: //jsfiddle.net/bernie1227/wCx9N/

该解决方案基本上只是利用：

pageWidth - (elementWidth + elementLeft) < 0

为了检查元素是否溢出。