移动端历史搜索标签不换行是因为父容器未启用flex-wrap: wrap；应设display: flex和flex-wrap: wrap，并用gap统一间距，避免word-break破坏中文语义。
移动端历史搜索标签为何不换行？
多数人写完 .history-item 后发现一长串词全挤在一行、溢出屏幕，根本不是“自动换行”——本质是没给容器设宽度限制，也没启用 flex 换行机制。flex 默认是 flex-wrap: nowrap，哪怕子项是 inline-block 或设置了 white-space: normal，只要父容器没开 wrap，就不会折行。
用 flex-wrap: wrap 实现标签流式布局
把历史词容器改成 flex 布局，并显式开启换行，是最可控的方式：
.history-container {
display: flex;
flex-wrap: wrap;
gap: 12rpx; /* 替代 margin-right + margin-top */
}
这样做的好处是：
-
gap统一控制间距，避免margin在末尾多留空白 - 子项无需再设
display: inline-block，直接用view或text即可 - 天然支持响应式：窄屏下自动压缩列数，宽屏下铺满
- 不会因单个长词（如“XX市生态环境局委托检测项目2026年度第三方评估”）撑爆整行
为什么不用 word-break: break-all 强制断词？
历史搜索词是用户真实输入的关键词，不是 URL 或日志 ID，强行在中文里断字（比如“生态/环境/局”拆开）会破坏语义，反而降低可读性。更关键的是：
-
break-all对中文无效——中文本来就是以字为单位，不存在“单词内断开”的概念 - 它只对英文、数字串起作用，而历史词大概率是混合内容，效果不可控
- 真正要解决的是“容器不收口”，不是“文字太长”，优先级错了
兼容性与微信小程序特殊点
微信小程序基础库 2.27.0+ 已完全支持 flex-wrap 和 gap，但要注意：
- 别在
view上同时写flex-direction: column和flex-wrap，column 下wrap无意义 - 如果用旧版基础库（gap 不生效，改用
margin模拟，但必须给最后一行子项加 class 过滤掉多余 margin - 历史词若含空格或连字符（如“上海-浦东新区”），
white-space: normal就够了，不需要额外设word-break
最易忽略的一点：flex 容器必须有明确的宽度约束（比如 max-width: 100% 或固定 width），否则在某些安卓 WebView 下可能计算错误，导致换行失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
