用 替代空格可解决html下拉框空格被合并问题，因option不支持white-space等css样式，也无法嵌套span；复杂需求需用js模拟下拉并确保aria可访问性。
HTML下拉框里空格被合并怎么办
HTML 默认会把连续空格、制表符、换行都压缩成一个空格，<select></select> 里的 <option></option> 也不例外。所以直接写 <option>A B</option> 或多个空格，浏览器照样只显示一个空格。
用 替代普通空格
这是最直接有效的办法：把想保留的每个空格换成 HTML 实体 （non-breaking space）。它不会被浏览器折叠，且能撑开宽度。
示例：
<select><option value="1">Item A</option> <option value="2">Item B</option></select>
注意： 是字符实体，不是标签，必须写成 （& 符号要转义），不能写成 （在属性值或某些上下文中会失效）。
- 适合固定格式、选项数量少的场景
- 不建议大量使用——可读性差，维护成本高
- 不同浏览器对
用 <span></span> + CSS 不起作用
<option></option> 是替换元素，内部不支持嵌套标签，也不支持大多数 CSS 样式（如 white-space: pre、font-family 等）。给 <option></option> 设置 style="white-space: pre;" 或包裹 <span></span> 都会被忽略。
常见错误写法（无效）：
<option value="1"><span style="white-space:pre">A B</span></option><option value="2" style="white-space:pre">X Y</option>
这些写法在所有主流浏览器中均无效果。
更灵活的替代方案：禁用原生 <select></select>
如果需要真正可控的空白、缩进、甚至图标或颜色，就得放弃原生下拉，改用 JavaScript 模拟（如 <div> + <code><ul></ul> + ARIA）。此时你可以自由使用 、padding-left、text-indent，甚至 tab-size。
关键点：
- 必须添加
role="listbox"和aria-expanded等属性，保证可访问性 - 键盘导航（↑↓EnterEsc）需手动实现，否则残障用户无法操作
- 移动端点击区域、focus 状态、滚动定位都要额外处理
- 简单页面用
真正难的不是显示空格，而是让空格在语义、可访问性和视觉一致性之间不翻车——尤其当选项来自后端数据、空格数动态生成时， 容易漏转义或过度嵌套。
