HTML中空格会被浏览器合并，需用 实现不可折叠空格；多空格对齐应优先用white-space:pre-wrap;或CSS Flex/Grid布局，而非依赖空格实体。
HTML 里直接敲空格键，浏览器会自动合并成一个空格——这不是你想要的“多个可见空格”，也不是时间轴节点里对齐文字所需的稳定间距。
用 实现可控的单个空格
这是最常用也最稳妥的方式。 是 non-breaking space 的 HTML 实体，浏览器不会合并它，也不会在行尾断开。
- 适合在文字中间插入一个“不可折叠”的空格，比如
第 1 步防止数字被挤到换行 - 在时间轴节点中，常用于分隔图标与文字：
● 初始化完成 - 连续写多个：
white-space CSS 属性控制整段文本的空格行为
当你要保留一整段中所有空格、制表符和换行（比如日志输出、代码片段、或对齐的时间轴描述），white-space 比堆 更合理。
-
white-space: pre;：保留空格和换行，但不自动换行（超出容器也不折行） -
white-space: pre-wrap;：保留空格和换行，且内容超宽时正常折行——时间轴节点文字最常用这个 - 用法示例：
<div style="white-space: pre-wrap;">2024-03-01 启动服务 ✅</div>
其中两个制表符或多个空格都会原样显示
避免用 / 做对齐
这些是固定宽度空格实体（ ≈ 半个汉字宽， ≈ 一个汉字宽），看似精准，实则问题不少：
立即学习“前端免费学习笔记（深入）”；
- 字体不同时，实际像素宽度浮动，对齐容易偏移
- 响应式场景下缩放或换字体，对齐立刻失效
- 语义不清，可读性差，后续修改成本高
- 真正需要对齐（如时间轴左右两端时间+描述），应该用 CSS Flex 或 Grid，而不是靠空格“凑”
时间轴节点中空格的真实痛点：不是“怎么打”，而是“要不要打”
很多时间轴文案出问题，不是因为没打够空格，而是结构本身没分离语义。比如：
- 把时间、状态图标、描述文字全塞进一个
<span>里，再用空格硬调位置 - 结果是：换行错乱、缩放错位、翻译时顺序崩塌（RTL 语言更明显）
- 正确做法：用标签划分职责，例如
<li class="timeline-item"> <time datetime="2024-03-01">2024-03-01</time> <span class="status">✅</span> <span class="desc">初始化完成</span> </li>
再用 CSS 控制间距（gap、margin或flex）
空格只是表象，结构才是关键。一旦结构松散，再多 也救不回对齐。
