Полностью скрыть HTML-узел, когда он переполняет div - PullRequest
Новая
       16

Полностью скрыть HTML-узел, когда он переполняет div

0 голосов
/ 20 декабря 2018

Как я могу полностью скрыть узел 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>

Здесь блик стека указывает на случай, когда частично скрытый элемент должен быть полностью скрыт: https://stackblitz.com/edit/js-gfxwtt

1 Ответ

0 голосов
/ 20 декабря 2018

Вы можете включить перенос и использовать фиксированную высоту, чтобы не видеть элементы, которые должны переполниться, потому что они попадут в следующую строку: 

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>
...