用 flex 布局实现搜索历史标签自动换行需设 flex-wrap: wrap，配合理想的 padding/font-size（如 4px 8px/12px）、border-radius（12px）、white-space: nowrap 及动态 key 和过渡动画。
搜索历史标签怎么让它们自动换行不溢出容器
用 flex 布局最稳，但必须设 flex-wrap: wrap，否则默认单行挤爆父容器。很多人只写 display: flex 就以为完事了，结果标签全堆在一行里，右边直接被裁掉。
常见错误现象：标签文字被截断、右侧出现横向滚动条、最后几个标签看不见。
-
flex-direction保持默认row，别改成column（那是竖着排，不是“自动排列”） - 父容器要设明确宽度或最大宽度，比如
max-width: 100%或具体像素值，否则flex-wrap可能不触发 - 每个标签加
margin-right和margin-bottom，避免换行后首行和次行标签贴太紧
圆角小标签的 padding 和 font-size 怎么配才不丑
小标签不是越小越好，font-size: 12px 配 padding: 4px 8px 是多数项目验证过的安全组合；再小就容易点击困难，尤其在移动端。
性能影响不大，但兼容性要注意：border-radius 在老版 Safari（iOS 9 以下）对 inline 元素支持不稳定，所以标签得是 display: inline-flex 或 inline-block。
立即学习“前端免费学习笔记（深入）”；
- 别用
height硬撑高度，靠padding控制更灵活 -
border-radius: 12px对应font-size: 12px比较协调，太大（如20px）会显得头重脚轻 - 如果标签内容长度差异大，加
white-space: nowrap防止文字折行破坏圆角形状
标签太多时怎么限制显示数量并加“更多”按钮
前端硬截断比后端传截断后数据更可控——因为搜索历史可能实时更新，且“更多”逻辑依赖用户交互状态。
关键不是隐藏多余标签，而是用 :nth-child(n+6) 配合 JS 切换显隐，否则纯 CSS 截断后无法响应点击展开。
- 初始只显示前 5 个标签，用
display: none隐藏第 6 个起的元素 - “更多”按钮本身要加
data-count属性存总数，比如data-count="12"，避免重复查 DOM - 展开后记得把按钮文本从“更多”换成“收起”，并确保收起时恢复原始 DOM 顺序（别用
append()乱插）
Vue/React 里动态渲染标签怎么避免重复 key 或样式错乱
React 中 key 必须是稳定唯一值，不能用数组索引；Vue 中 v-for 同理。搜索历史常含重复关键词（比如搜了两次“前端”），直接拿 item 当 key 会报错或样式错位。
容易踩的坑是拼接时间戳或随机数当 key，导致每次渲染都重建 DOM，动画卡顿、焦点丢失。
- 推荐用
item + '_' + index（仅限无编辑/删除场景）或哈希后缀，比如md5(item) + timestamp.slice(-4) - 标签容器加
transition-group（Vue）或CSSTransition（React）做入场动画时，确保key不变，否则动画失效 - 服务端返回的 history 数组如果没排序，前端要先按时间倒序，不然“最新”标签可能排在最后
圆角标签看着简单，但自动换行 + 动态数量 + 框架渲染三者叠加时，margin 折叠、flex 项基线对齐、key 失效这几个点最容易漏掉调试。
