本轮修复内容
① 标题限制 12 字（按要求落实，三层闭环）
- 显示端：后台 KPI 卡片标题截断 12 字、副标题 20 字
- 配置端：导航配置页卡片名称输入框
maxlength=12（副标题 20、首页 Tab 名/主导航名 12），新增行的动态输入框同限，保存时再截断兜底 - CSS 兜底：
.kpi-label由 flex 改为 block——flex 容器中 text-overflow 不生效，这是省略号失效的根因之一
② 用无头 Chrome 实际渲染定位到还是错位的真正现场
之前静态分析漏掉了 inline 元素陷阱，本轮 headless 渲染实测发现：
| 位置 | 根因 | 实测数据 |
|---|---|---|
前台卡片预览 .prev-name / .prev-dom（后台看板右下） |
是 inline span，overflow:hidden 对 inline 无效 |
名称实际渲染 371px，超出卡片 164px 达 207px，文字真出框 → 加 display:block，复测渲染 93px 正常省略 |
前台站点卡片 .card-name |
display:flex 容器，省略号不生效 |
长名称被硬裁 → 改 block，HOT/排名徽标改 inline-block |
前台顶部统计 .hero-stat span |
无截断无保护 | 已加 12 字截断 + ellipsis |
③ 渲染验证结果（headless Chrome 实测）
- KPI 四卡等高 115/115/115/115px，超长标题/副标题/大数字全部省略无溢出
- 热门站点行不换行、趋势图 14 列日期无重叠、左右卡片等高、表格无横向溢出、页面无横向滚动
验证：三个 JS 语法通过；线上资源确认含全部新修改；修改前已备份（*.bak.title12.*）。
后台页面请 Ctrl+F5 强制刷新（浏览器缓存旧 CSS 会看不到效果）；如仍有个别位置错位，告诉我具体区块名，我继续用渲染验证定位。
状态：已完成并验证