Angular从11升级到15后span元素间空白消失问题求助

以下是几个可行的排查和解决方向：

• 排查Bootstrap样式变更
  从低版本Bootstrap升级到最新版时，排版默认样式会有调整，包括内联元素的空白处理。检查h4或span的white-space、letter-spacing、word-spacing属性，看是否有继承来的样式覆盖了默认的空白展示。可以通过浏览器检查器对比旧项目中这些元素的样式计算值，找到差异后针对性调整。

• 检查Angular构建的HTML压缩优化
  Angular 12及以后的生产构建默认启用了更严格的HTML压缩，会移除元素间的换行和空白字符。旧版本Angular 11的压缩策略相对宽松，所以之前的换行能保留视觉空白。

  • 验证：分别运行开发环境（ng serve）和生产环境（ng serve --prod），看空白是否只在生产环境消失。
  • 解决：
    1. 手动在span间添加 强制留白；
    2. 用CSS统一设置间距，避免依赖HTML空白：

       h4 span:not(:last-child) {
         margin-right: 0.5em; /* 可根据需求调整间距大小 */
       }
       

    3. 若需保留原有HTML空白，可在angular.json的build配置中修改optimization.minifyHtml为false（不推荐，会影响性能）。

• 核对字体相关样式的继承变化
  新版本Bootstrap可能修改了h4的font-size、line-height等属性，导致由换行产生的空白字符视觉大小被压缩或折叠。通过浏览器检查器查看h4的计算样式，对比旧项目的数值，调整相关属性恢复预期间距。

• 再次排查伪元素影响
  可以在浏览器检查器中禁用所有::before/::after伪元素，测试空白是否恢复。也可以全局搜索CSS代码中针对h4 span的伪元素样式，确认是否在升级过程中被修改或移除。

内容的提问来源于stack exchange，提问作者kwlSca