在一行中显示尽可能多的元素，如果不能容纳所有元素，则添加表示剩余元素数量的附加元素

Question

我想将给tags定文章的所有内容排列在一行中。

如果所有内容都tags可以放在一行中，那么我想显示所有内容，如下所示：

但是，如果有更多tags并且并非所有的都可以放在同一行中，我想显示尽可能多的内容，并且我想添加表示剩余数量的附加标签tags，如下所示：

我创建了这个快速启动代码，以便每个人都可以跳转并更新必要的内容。

.card {
  padding: 5px;
  width: 300px;
  height: 300px;
  border: 2px solid blue;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.tag {
  padding: 5px 8px;
  color: #2C3C93;
  background: rgb(44, 60, 147, 0.1);
  height: 20px;
}

<div class="card">
   <div class="tag">Developing</div>
   <div class="tag">Busniess</div>
   <div class="tag">Web Design</div>
</div>

Answer 1

尝试这个

let cardWidth   = document.querySelector('.card').offsetWidth; // or 300
let tagsWidth   = 0;
let hiddenItems = 0;

document.querySelectorAll('.tag').forEach(tag => {
    tagsWidth += tag.offsetWidth;

    if( tagsWidth + 60 > cardWidth ){
        hiddenItems++;
        tag.style.display = 'none';
    }
})
if( hiddenItems > 0 ){
    document.querySelector('.card').insertAdjacentHTML('beforeend', `<div class="tag">${hiddenItems}+</div>`)
}

*,*::before,*::after {
  box-sizing: border-box;
}

.card {
  padding: 5px;
  width: 300px;
  height: 300px;
  border: 2px solid blue;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.tag {
  padding: 5px 8px;
  color: #2C3C93;
  background: rgb(44, 60, 147, 0.1);
  white-space: nowrap;
}

<div class="card">
   <div class="tag">Developing</div>
   <div class="tag">Busniess</div>
   <div class="tag">Web Design</div>
</div>

请注意，60这里是“剩余/隐藏标签 div”tagsWidth + 60的宽度。这是为了确保在超过.tagsWidthcardWidth