如何避免格式化后的HTML <sup>标签前出现多余空格？

以下几种优雅方案可消除换行导致的间隙：

• HTML注释衔接法
  在文本末尾与<sup>标签的换行处插入注释，让浏览器忽略换行符：

  <div>
      <span>
        Some quite long text that I'd love to separate from sup element<!--
        --><sup>Sup content</sup>
      </span>
  </div>
  

• CSS精准控制
  给包含元素设置font-size: 0再重置内部元素字体大小，彻底消除空格：

  span {
    font-size: 0;
  }
  span > * {
    font-size: 1rem; /* 重置为你需要的字体大小 */
  }
  

  或者用white-space属性局部控制文本与<sup>的衔接：

  span {
    white-space: nowrap;
  }
  

• 标签内联闭合技巧
  将<sup>标签的起始部分与前一行文本结尾衔接，避免换行产生空格：

  <div>
      <span>
        Some quite long text that I'd love to separate from sup element<
        sup>Sup content</sup>
      </span>
  </div>
  

• Flex布局方案
  给父<span>设置Flex布局，自动忽略元素间的换行空格，同时保证<sup>与文本基线对齐：

  span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
  

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