css - 如何删除超出div大小的内容

Question

我有一个特定大小的父 div，在他里面我有其他 div，如果这些子 div 中的任何一个开始显示它们的内容超出父 div，我想删除那个 div，不，我不想把它和溢出隐藏起来我真的很想删除他。我试图搜索解决方案，但没有找到任何解决方案。我该如何解决这个问题？

我有这个JSFiddle以便更好地理解问题。

代码如下:

<div style="width: 300px; height: 55px; background-color: gray">
  <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div style="border: 2px solid red">
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <strong>I WANT DO DELETE THIS DIV!</strong>
  </div>
</div>

我不知道我是否可以使用 Blazor 做到这一点，但我是来学习的。

感谢您的关注。

Answer 1

基本上，您可以通过遍历子项并检查他们的顶 Angular 在 Y 轴上是否“高于”(“该轴上的较高”值意味着，它在屏幕上较低)来实现此目的自己的高度。您可以使用 offsetTop此处的属性，如果父元素也是 offsetParent child 的 - 如果定位涉及任何地方，这可能会改变 offsetParent，所以在这种情况下你可能需要使用相对于视口(viewport)的坐标。

var p = document.getElementById('parent'),
    c = p.children;

for(var i=c.length-1; i>=0; --i) {
  console.log(c[i], c[i].offsetTop, p.offsetHeight)
  if(c[i].offsetTop >= p.offsetHeight || c[i].offsetHeight > p.offsetHeight) {
    p.removeChild(c[i]);
  }
}

#parent { position: relative; }

foo
<br>
<div id="parent" style="width: 300px; height: 55px; background-color: gray">
  <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div style="border: 2px solid red">
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <strong>I WANT DO DELETE THIS DIV!</strong>
  </div>
</div>

我在这里以相反的顺序遍历子项 - 这样可以减少删除元素的麻烦，以及 children 返回的实时 HTMLCollection 中剩余元素的索引。 .

我介绍了foo<br>在此处的开头，使整个元素与视口(viewport)稍微偏离 - 然后您会注意到如何将父元素设置为 position:relative更改 offsetTop 值，从 CSS 中删除它并查看调试输出中的值如何变化。

现在，根据您相当简单的示例，这是一种简单的方法。在更复杂的布局情况下，它可能不会那么容易工作。

---

编辑:不仅需要检查 offsetTop，还需要检查 offsetHeight。否则，如果最后一个元素高于父元素本身，则它可能不会被删除。