<div class="container">
  <div class="tags"></div>
  <div class="ellipsis"></div>
</div>

<form>
  <input />
  <button>追加</button>
</form>
<button class="clear">クリア</button>

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.tags {
  height: 70px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.tag {
  padding: 10px;
  margin: 10px;
  background: #0dd;
  height: 50px;
  line-height: 30px;
}

.ellipsis {
  background: #ddd;
  padding: 10px;
  margin: 10px;
  line-height: 30px;
}

function debounce(f, interval) {
  let handler;
  return function () {
    if (handler) clearTimeout(handler);
    handler = setTimeout(() => {
      f.apply(this, arguments);
    }, interval);
  };
}

const tags = document.querySelector(".tags");
const form = document.querySelector("form");
const input = document.querySelector("input");
const ellipsis = document.querySelector(".ellipsis");

function countEllipsisedTags() {
  const tagElems = Array.from(document.querySelectorAll(".tag"));
  if (tagElems.length === 0) return 0;
  const { top } = tagElems[0].getBoundingClientRect();
  for (let i = 1; i < tagElems.length; i++) {
    if (tagElems[i].getBoundingClientRect().top !== top)
      return tagElems.length - i;
  }
  return 0;
}

let prev = "block";
function refreshEllipsis({ noRetry = false } = {}) {
  const size = countEllipsisedTags();
  ellipsis.textContent = String(size);
  const display = size === 0 ? "none" : "block";
  if (display !== prev) {
    ellipsis.style.display = display;
    prev = display;
    if (!noRetry) refreshEllipsis({ noRetry: true });
  }
}

window.addEventListener("resize", debounce(refreshEllipsis, 200));

refreshEllipsis();

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const value = input.value;
  const div = document.createElement("div");
  div.classList.add("tag");
  div.textContent = value;
  tags.appendChild(div);
  refreshEllipsis();
});

document.querySelector(".clear").addEventListener("click", () => {
  tags.innerHTML = "";
  refreshEllipsis();
});