如何移除HTML元素中换行导致的文本尾随空格？

当你为了可读性将HTML标签与文本分行排版时，浏览器会把文本结尾的换行解析为可选中的尾随空格，而开头的换行缩进会被自动合并，这是HTML空白处理的默认规则。以下是几个简洁、低hack的解决思路：

方案1：闭合标签与文本末尾同行 #

这是最直接的原生解决方案，仅调整排版方式，无需额外代码：

<p>
  Lorem ipsum.</p>

既保留了标签与文本的分行结构，又避免了尾随空格生成，可读性损失极小。

方案2：用HTML注释消除尾端空白 #

如果希望严格保持闭合标签单独换行的排版，可以在文本末尾与闭合标签之间插入空注释，它会“吃掉”中间的换行和空格：

<p>
  Lorem ipsum.
<!-- --></p>

注释本身不会渲染，也不会影响页面布局，完美兼顾可读性与无尾随空格的需求。

方案3：CSS批量调整空白处理 #

通过CSS的white-space属性精细控制空白行为，适合需要批量处理多个元素的场景：

.no-trailing-space {
  white-space: pre-line;
}

给目标元素添加这个类后，所有换行都会被合并为单个空格，同时保留文本的自然换行。注意：该方案会让文本开头的缩进也被完全合并，如果需要保留开头缩进，此方案不适用。

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