abbr标签的title属性不显示是因规范限定其仅作辅助技术语义支持，非ui组件；桌面端悬停偶现、移动端完全失效，须用data-full+css/js实现跨端可见可交互提示。
abbr 标签的 title 属性为什么没显示？
浏览器默认只在鼠标悬停时显示 title，且仅限桌面端；移动端不触发，也不支持键盘焦点访问。这不是 bug，是规范行为——<abbr></abbr> 的 title 仅作辅助技术（如屏幕阅读器读出全称），不是 UI 提示组件。
怎样让缩写词真正「可见可交互」？
纯语义 HTML 不够，需配合 CSS 或 JS 实现视觉反馈。关键点：不能只依赖 title，必须主动渲染全称。
- 用
data-full替代title存放全称（避免语义污染和可访问性冲突） - CSS 添加
hover::after显示气泡提示（注意 z-index 和定位） - 对键盘用户，加
tabindex="0"并监听focus触发显示逻辑 - 示例：
<abbr class="has-tooltip" data-full="Application Programming Interface">API</abbr>
兼容性与可访问性陷阱有哪些？
很多团队误以为加了 title 就满足 WCAG 2.1，其实不行。屏幕阅读器对 <abbr title="..."></abbr> 的支持不一致：NVDA 读，VoiceOver 有时跳过，JAWS 需开启“标记语言”模式。
- 必须同时提供
aria-label或包裹<span aria-hidden="true"></span>+<span class="sr-only"></span>全称 - 不要用
display: none隐藏全称文本，改用clip-path或position: absolute; clip: rect(0 0 0 0) - Chrome 120+ 对
abbr[title]的 focus 样式有 bug，建议统一用 JS 控制显示态
要不要用 JavaScript 动态注入全称？
要，但只用于增强，不用于核心功能。静态 HTML 中已应包含完整语义结构。
- 优先用 CSS 实现 hover/focus 显示，JS 仅补足移动端 tap、触控屏长按等场景
- 避免全局监听
mouseover，改用事件委托绑定到容器，减少性能开销 - 示例逻辑：
document.querySelectorAll('abbr[data-full]').forEach(el => { el.addEventListener('click', () => { /* 移动端展开 */ }); }); - 若项目已用 React/Vue，别手动操作 DOM，用组件封装
abbr行为，把data-full作为 prop 透传
实际部署时最容易被忽略的是：没有测试 VoiceOver + Safari 组合下的朗读顺序，以及未处理 abbr 在行内换行时的气泡定位偏移。这些细节不报错，但直接导致信息丢失。
