如何在格式化HTML代码中避免渲染后出现尾随空格？

以下是无需修改标签位置、也不用JavaScript的纯HTML解决方案：

• 用HTML注释消除空白间隙
  当内容末尾与闭合标签之间存在换行/空格时，在两者之间插入<!-- -->注释，HTML解析器会忽略注释前后的空白，从而避免生成尾随空格。示例：

  <body>
    <p>
      This is a paragraph in this formatted
      document that will render as one
      single line.<!-- -->
    </p>
    <a href="example.html">
      Link content here<!-- -->
    </a>
    <p>
      Text before image<!-- -->
      <img src="demo.jpg" alt="Demo">
    </p>
  </body>
  

  原理：HTML解析时会将标签与内容之间的换行、空格折叠为单个空格，而注释会“吃掉”这些空白区域，阻止多余空格被渲染。

• 补充说明
  CSS方案确实无法解决此问题：white-space系列属性仅控制空白的显示规则，无法区分内容自带空格和标签换行产生的空格；后续CSS新增的text-trim等属性在HTML4.01环境下不支持，因此纯CSS路径不可行。

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