浏览器会合并title属性中的连续空格、换行和制表符为单个空格，这是HTML规范对可访问性文本的标准化处理；用Unicode不间断空格（U+00A0）或细空格可避免折叠，JavaScript动态设置时需显式插入Unicode字符，或改用aria-label配合CSS tooltip实现可控格式。
HTML提示工具条中空格被合并的默认行为
浏览器渲染时，title 属性值里的连续空格、换行、制表符都会被当作普通空白符处理，最终只显示为单个空格。这不是 bug，而是 HTML 规范对「可访问性文本」的标准化处理——屏幕阅读器、爬虫、辅助技术都不依赖视觉排版，所以刻意忽略空白差异。
这意味着：title="a b" 和 title="a b" 在鼠标悬停时显示效果完全一样。
用 Unicode 不间断空格替代普通空格
最轻量、兼容性最好的解法：把空格替换成 （即 U+00A0）或更稳妥的 （细空格，thin space），它们不会被折叠，且在 title 中能保留宽度。
实操建议：
-
title="ID: 123"） -
title="Name: Alice"） - 避免用
title中不一定生效，且语义是排版单位，非空白占位
JavaScript 动态设置 title 时注意转义
如果 title 是 JS 动态赋值的（比如 el.title = "x y"），直接拼接字符串无效——浏览器仍会压缩。必须显式插入 Unicode 字符。
正确写法示例：
el.title = `Value:   ${value}`;
错误写法（不起作用）：
立即学习“前端免费学习笔记（深入）”；
el.title = "Value: " + value; // 连续空格会被压缩
额外提醒：服务端模板（如 Jinja、EJS）同理，需用实体编码而非原始空格。
替代方案：用 CSS tooltip 完全接管样式
当空格对齐只是表象需求，本质是想“自定义提示外观”，就该放弃 title。用 aria-label 提供语义，再用纯 CSS 实现带格式的 tooltip。
关键点：
-
aria-label可含任意空白，不影响可访问性（读屏软件会按原样朗读） - 视觉 tooltip 用
::after+content生成，里面可自由写\a换行（配合white-space: pre-wrap） - 注意 z-index、pointer-events 和焦点管理，否则键盘用户无法触发
title 的空格处理是铁规则，绕不开；真正可控的只有替换字符或换方案。多数时候，用 就够了，但别忘了检查它在小字号下是否真的可见。 
