溢出div时完全隐藏html节点

Question

如何完全隐藏一个 HTML 节点，该节点已经开始溢出父 HTML 节点边界？

overflow:hidden行为部分隐藏了项目，但我愿意全部隐藏。

const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

h1,
h2 {
  font-family: Lato;
}

.item {
  font-size: 36px;
  border: 2px dashed red;
  padding: 1rem
}

.parent {
  display: flex;
  justify-content: space-evenly;
  border: 5px solid blue;
  overflow: hidden;
  padding: 1rem
}

<div id="app">asd</div>

<div class="parent">
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
</div>

这里是stack-blitz表示需要完全隐藏部分隐藏项的情况：https://stackblitz.com/edit/js-gfxwtt

Answer 1

您可以启用换行并使用固定高度，这样您就不会看到应该溢出的元素，因为它们会落入下一行：

const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

h1,
h2 {
  font-family: Lato;
}

.item {
  font-size: 36px;
  border: 2px dashed red;
  padding: 1rem;
  margin-top:1rem;
}

.parent {
  display: flex;
  justify-content: space-evenly;
  border: 5px solid blue;
  overflow: hidden;
  flex-wrap:wrap;
  max-height: 90px;
  padding:0 1rem 1rem;
}

<div id="app">asd</div>

<div class="parent">
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
  <span class="item">100</span>
</div>

溢出div时完全隐藏html节点

Completely hide html node when it overflows div

html

css

overflow

flexbox