用纯HTML+CSS实现响应式技能标签云，关键在于inline-flex/inline-block布局、font-size:0消除间隙、margin控制间距、data-level属性驱动视觉优先级，并避免white-space:nowrap陷阱。
怎么用纯 HTML + CSS 实现响应式技能标签云
不用 JS 就能做，关键在 display: inline-flex 或 display: inline-block 的组合 + 合理的间距控制。浏览器原生支持好，IE11 也能跑，但得避开 flex-wrap: wrap 在旧版 Safari 的换行 bug。
- 标签用
<span>或<a>包裹，别用<div>——否则默认块级会强制换行 - 给容器设
font-size: 0消除inline-block元素间的空白符间隙；子元素再重设font-size - 每个标签加
margin-right: 0.5em和margin-bottom: 0.3em，比用gap兼容性更稳 - 避免用
float: left，现代布局里它容易导致父容器塌陷且难响应
如何让不同技术栈标签视觉上区分优先级
靠字号、颜色、边框粗细三者叠加，而不是只改背景色——后者在色弱用户下几乎不可辨。CSS 里直接写死层级不如用 data-level 属性驱动样式，方便后续用 JS 动态调整。
-
data-level="1"→font-size: 0.9em; border: 1px solid #666 -
data-level="2"→font-size: 1.1em; border: 2px solid #007bff -
data-level="3"→font-size: 1.3em; border: 2px solid #28a745; font-weight: 600 - 别用
!important控制优先级，属性选择器[data-level="3"]本身权重就足够
为什么 white-space: nowrap 在标签云里是陷阱
它会让长标签（比如 @vue/composition-api）撑破容器、触发横向滚动条，尤其在移动端。真正需要的是“单行截断 + 省略号”，但前提是容器有明确宽度或最大宽度。
- 对超长标签单独加类
truncate：overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px - 别给整个标签云容器设
white-space: nowrap，那等于放弃响应式 - 如果标签含斜杠或连字符（如
node-sass），记得加word-break: break-all防止单词卡住换行
Vue/React 项目里怎么复用 HTML 标签云结构
核心是把标签数据抽成数组，用循环生成 <span>，但注意：框架默认插入空格或换行符，会导致和纯 HTML 行为不一致。
立即学习“前端免费学习笔记（深入）”；
- Vue 模板中用
v-for时，在<span>间不换行、不加空格，否则又出现间隙问题 - React 中用
.map()返回带key的<span>，别包在<div>或<Fragment>外层——除非你主动清除margin - 所有样式仍走外部 CSS 文件，别用内联
style，否则无法复用data-level对应规则
最常被忽略的是字体渲染差异：Mac 上 font-family: -apple-system 和 Windows 上 Segoe UI 对相同 font-size 的实际占用宽度不同，测试时一定在双平台看齐行效果。
