HTML解析阶段即裁剪文本节点末尾空白，包括空格、制表符、换行符，textContent和innerText均不可见；white-space属性仅影响渲染，无法恢复已被解析器删除的结尾空白。
直接在 HTML 文本结尾敲空格，浏览器会把它吃掉——不是 bug，是规范行为。结尾空格（包括换行、制表符）在解析阶段就被丢弃，textContent 读出来也是空的，innerText 同样不可见。
为什么结尾空格永远不显示
HTML 解析器对「行尾空白」有明确裁剪逻辑：每个文本节点末尾的连续空白字符（空格、\t、\n）都会被剥离。哪怕你写成 <p>hello </p>，最后那个 后面再跟空格，它照样消失。
常见错误现象：
- 用
document.querySelector('p').textContent检查，发现结尾空格根本不存在 - 在 DevTools 的 Elements 面板里看渲染后的文本，光标停在字母后就结束，没留白
- 想靠结尾空格实现「文字右对齐留白」，结果右侧紧贴容器边框
white-space: pre-wrap 也救不了结尾空格
这个 CSS 属性能保留中间的空格和换行，但对结尾空格依然无效——它只影响渲染阶段，而结尾空格早在 DOM 构建前就被 parser 删干净了。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 别试图在 HTML 源码里靠“多敲几个空格”补结尾空隙
-
white-space: pre-wrap+ 结尾pre-wrap保护不被换行截断 - 若内容来自 JS 动态插入，必须用
innerHTML赋值，textContent会把
更可靠的替代方案
结尾空格本质是视觉留白需求，不是语义需求。真要控制右侧间距，优先走布局层：
- 用
padding-right或margin-right—— 稳定、可响应、不依赖字体 - 需要等宽间隙（如对齐数字列）时，用
text-align: right+ 容器固定宽度，比堆空格靠谱得多 - 若必须用空格字符，只用
真正难的不是让结尾空格出现，而是意识到：HTML 不负责「像素级末端留白」，CSS 和布局才是它的主场。
