如何实现HTML中文段落源码换行但渲染无额外空格？

以下是几个直接修改HTML源码即可实现拆分源码行、页面渲染无额外空格的方案：

方案一：利用HTML注释消除换行间隙 #

在源码换行的位置插入注释，HTML解析器会忽略注释内容，不会将换行转化为空格，同时还能保留源码的缩进格式：

<div>
  你好。你好。<!--
  -->你好。你好。<!--
  -->你好。你好。<!--
  -->你好。你好。
</div>

这种方式既拆分了过长的源码行，又保证页面渲染时中文连续无空格。

方案二：紧凑换行（无缩进） #

如果可以接受换行后不保留缩进，直接将下一行的中文紧贴着上一行末尾，不添加任何空格或缩进：

<div>
  你好。你好。
你好。你好。
你好。你好。
你好。你好。
</div>

这种方式无需额外标记，但源码的可读性会稍差一些。

方案三：使用CSS控制空白字符 #

给包含中文的容器添加white-space: nowrap和word-break: keep-all（可选，防止中文被强制换行），不过这个方案是让页面强制不换行，源码仍可拆分，但如果内容过长页面会出现横向滚动条，适合不需要页面自动换行的场景：

<div style="white-space: nowrap; word-break: keep-all;">
  你好。你好。
  你好。你好。
  你好。你好。
  你好。你好。
</div>

注意：这个方案下页面渲染时内容不会自动换行，如果需要自动换行，可改用white-space: pre-line，但此时源码的换行仍会被解析为换行符，不适合需要连续文本的场景。

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