如何实现不同长度标签最多换行3行后横向溢出可滚动的效果

解决方案（纯CSS实现，无需修改JS拆分标签数组） #

你可以通过给标签列表容器设置max-content宽度，配合固定最大高度和flex换行实现需求，修改后的CSS如下：

:root {
    --scpu-bg: #1b1b1b;
    --scpu-border: #3d3d3d;
    --scpu-fg: #ffffff;
    --tag-height: calc(2rem + 2px); /* 单个标签高度 = 上下padding各1rem + 上下border各1px */
    --tag-gap: 0.7rem; /* 标签间距 */
    color: var(--scpu-fg);
    font-size: 14px;
}

body {
    background-color: var(--scpu-bg);
}

.tag-chip {
    padding: 1rem;
    border: 1px var(--scpu-border) solid;
    /* 确保标签不被压缩宽度 */
    flex-shrink: 0;
}

.tag-cloud {
    overflow-x: auto;
    overflow-y: hidden; /* 隐藏纵向溢出内容 */
    width: 100%; /* 父容器占满可用宽度 */
}
 
.tag-list {
    max-height: calc(3 * var(--tag-height) + 2 * var(--tag-gap)); /* 恰好3行的高度 */
    display: flex;
    gap: var(--tag-gap);
    flex-wrap: wrap;
    width: max-content; /* 容器宽度由内容决定，不受父容器宽度限制 */
}

实现逻辑说明 #

• 给.tag-list设置width: max-content，让容器宽度完全随内容延伸，不会因为父容器宽度不足提前换行
• 精确计算3行标签的总高度作为max-height，配合flex-wrap: wrap，当内容排满3行后，后续标签会自动向右侧新的列排布，整体容器横向延伸
• 父容器.tag-cloud仅开启横向滚动，隐藏纵向溢出内容，最终实现你需要的3行横向滚动标签效果
• 给.tag-chip加flex-shrink:0避免标签被压缩宽度，保证每个标签宽度完全适配自身文本内容，不会出现统一宽度的生硬效果

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