CSS - 如果部分隐藏，则强制溢出元素消失答案

【问题标题】：CSS - Force overflowing elements to disappear if partially hiddenCSS - 如果部分隐藏，则强制溢出元素消失
【发布时间】：2011-02-04 17:00:20
【问题描述】：

假设我们有一个包含一些短段落的框：

<div style="overflow:hidden">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
</div>

框的高度是可变的，因此有时其中一个段落的文本会部分隐藏。

是否有一个 CSS 属性会强制段落完全显示或根本不显示，或者这需要使用 javascript 计算吗？

【问题讨论】：

标签： css

【解决方案1】：

扩展 PIoneer_2 的评论，可以通过 CSS flexbox wrapping 来实现。

在以下示例中，.wrapper 具有固定的宽度和高度，.child 具有固定的高度。因为所有.child 元素都不能放在一个flex 行上，所以最后一个.child 被下推到下一行。但是下一行是隐藏的，因为我们使用overflow: hidden，所以结果是部分溢出的元素被完全隐藏了。

<style>
.wrapper {
  background-color: green;
  display: flex;
  flex-wrap: wrap;
  height: 3em;
  overflow: hidden;
  padding: 0 1em;
  width: 120px;
}
.child {
  align-items: center;
  background: grey;
  display: flex;
  height: 100%;
}
.child + .child {
  margin-left: 1em;
}
</style>

<div class="wrapper">
  <div class="child">Lorem</div>
  <div class="child">Ipsum</div>
  <div class="child">Dolor</div>
</div>

【讨论】：

【解决方案2】：

我不知道用 CSS 怎么做，但是用 JavaScript，你可以检查一下：

var parent = element.parentElement;
if (element.clientTop + element.clientHeight > parent.clientTop + parent.clientHeight) {
    ... element is outside parent ...
}

您可以使用二进制搜索来查找最后一个完全可见的段落。

【讨论】：

2021 年：这个 JS 解决方案仍然是 wkhtmltopdf、wkhtmltoimage 及其继承工具的最佳解决方案之一！显示：flex；flex-flow：列换行；溢出：隐藏；应该在那里得到支持并且更好，但是...... :(