HTML中输入真正空格需用 等实体或CSS的white-space属性； 防合并与断行，但不宜连用；轮播图字幕推荐white-space:pre-wrap配合字体设置，兼顾换行与空白保留。
HTML 里怎么输入一个真正的空格字符
浏览器会把连续的普通空格、换行、制表符全部合并成一个空格，所以直接敲空格键在 HTML 中几乎“看不见效果”。要让轮播图字幕里显示多个空格或固定宽度空格，必须用 HTML 实体或 CSS 控制。
是最常用也最容易踩坑的空格符号
是 non-breaking space（不换行空格），它不会被浏览器合并，也不会在词尾断行。但要注意：
- 它属于 Unicode 字符
U+00A0，渲染宽度通常和普通空格一致（不是全角），但在某些字体下可能略宽 - 不要连写多个
- 在 Vue / React 模板中，
{' '}或用dangerouslySetInnerHTML，否则会被转义
轮播图字幕中真正需要的空格类型
轮播图字幕常需对齐、留白或分隔关键词（如“北京 · 2024”中间那个点前后各一空）。此时应按场景选：
- 仅需视觉分隔：用
U+2009） - 需等宽对齐（如价格右对齐 + 单位左对齐）：用
U+2002）或U+2003），但注意中文字体下 - 完全禁止换行（如“¥ 199”不让数字和符号分开）：必须用
CSS 的 white-space 才是轮播图字幕空格控制的主力
靠一堆 硬凑空格，不如用 CSS 精确控制。轮播图字幕容器加一行就解决多数问题：
立即学习“前端免费学习笔记（深入）”；
caption-text {
white-space: pre;
}
或者更稳妥的组合：
caption-text {
white-space: pre-wrap;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
这样你就能在 HTML 文本里直接敲空格、Tab、换行，浏览器都会照原样渲染。但注意：
-
white-space: pre会禁掉自动换行，长文本可能溢出；pre-wrap允许换行，推荐优先用它 - 移动端 Safari 对
pre-wrap支持良好，但老 Android WebView（4.4 以下）有兼容问题，若需兼容，退回到word-break: keep-all - 别在
上滥用white-space—— 它只对 inline 元素生效，块级字幕建议套并设display: inline-block轮播图字幕里的空格，本质是排版控制问题，不是字符输入问题。用错
