如何使用HTML/CSS/JS实现可动态生成的词气泡样式标签按钮

你当前的问题根源是grid-template-columns: repeat(auto-fill, minmax(30%, 1fr))强制将每列宽度设为容器宽度的至少30%，所有列宽被网格布局强制对齐，即便子元素设置了max-content也不会生效。同时代码中存在重复id的语法错误，id为全局唯一标识，多个重复元素应该用class声明。

纯CSS Flex布局即可实现需求，无需引入额外JS库，动态生成标签也能自动适配，是性能最优的解决方案：

修改后的HTML代码 #

<div id="tagsContainer">
  <h3 id="tagsTitle">TOP TAGS</h3>
  <div id="tags">
    <div class="tag">
      <h4 class="tagTitle">Flutter</h4>
    </div>
    <div class="tag">
      <h4 class="tagTitle">Deep Learning</h4>
    </div>
    <div class="tag">
      <h4 class="tagTitle">Machine Learning</h4>
    </div>
  </div>
</div>

修改后的CSS代码 #

#tagsContainer {
  float: left;
  width: 25vw;
  margin-top: 10vh;
  overflow: hidden;
}

#tags {
  /* 替换grid为flex布局，实现内容驱动的自适应 */
  display: flex;
  flex-wrap: wrap;
  /* 标签之间的水平、垂直间距 */
  gap: 10px 8px;
  /* 需要标签行两端对齐可开启下面这行，不需要则删除即可
  justify-content: space-between;
  */
}

.tag {
  background-color: #2F3841;
  border-radius: 8px;
  /* 由内容自动撑开宽度，移除固定宽度限制 */
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tag:hover {
  background-color: #404b57;
}

.tagTitle {
  margin: 0;
  color: #fff;
  font-size: 14px;
}

如果需要支持标签选中、输入新增等复杂交互功能，可以引入轻量JS标签库实现，基础流式自适应标签场景下上述方案已完全满足需求，适配所有主流浏览器，动态插入标签元素时也能自动适配布局。

内容的提问来源于stack exchange，提问作者Pranav