时间戳

首页 > 解决方案 > 如何删除超出 div 大小的内容

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

问题描述

我有一个具有一定大小的父 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 做到这一点，但我是来学习的。

感谢您的关注。

标签： cssblazor

解决方案

基本上你可以通过循环遍历孩子来做到这一点，并检查他们的上角在 Y 轴上是否“更高”（该轴上的“更高”值意味着它在屏幕上低于父母自己的高度）。您可以在offsetTop此处使用该属性，如果父元素也是子元素offsetParent的 - 如果在任何地方涉及定位，则可能会更改 offsetParent，因此在这种情况下，您可能需要使用相对于视口的坐标。

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>

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

我foo<br>在这里一开始就介绍了，所以整个元素从视口中偏移了一点——然后你会注意到如何设置父级来position:relative更改 offsetTop 值，从 CSS 中删除它并查看调试中的值如何输出变化。

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

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

推荐阅读