html - 为什么在 <p> 元素之后的新行会添加一个空格？

Question

一位同事在我完成的屏幕上遇到了文本对齐问题。我在使用 Chrome 的 Win10 PC 上看到了这个问题，一些文本行如下所示:

Text line 1.
 Text line 2 is much longer and wraps to two lines, but the second line
does not have the whitespace added.
 Text line 3 does not wrap, and has the same alignment issue.

当我在我的 Mac 上使用 Chrome 查看它时，我没有看到问题，所以我巧妙地推断它很可能是一个 Win-Chrome 错误与一些引导类等。

但是，深入研究后，问题最终出在 <p> 的格式上。标签内容:

<p>Text line 1.</p>
<p>
    Text line 2 is much longer and wraps to two lines, but the second line does not have the whitespace added.
</p>
<p>
    Text line 3 does not wrap, and has the whitespace.
</p>

我知道字符串中间的换行符会在大多数浏览器中推断出一个空格(谢天谢地)，这样您就不必在编写多行内容时添加尾随/前导空格。但是，我从未见过初始返回导致前导空格。

关键是可能有很多代码是这样格式化的，客户端会发现对齐问题，因为他们在 Win10 中进行测试。 为什么会发生这种情况，很可能是 Win/Chrome 错误？这是某些浏览器开发人员有意识的选择吗？

引用资料将不胜感激，但我个人找不到任何与 SO、CSS-Tricks 或 Chrome 浏览器文档相关的内容。

编辑: 另一位同事已确认添加 <br />在 <p> 内标记(无尾随/前导空格)之后还会直接生成一个前导空格。

Answer 1

white-space: pre-wrap 保留空白，因此在自动换行时不会添加额外的空格，因为它位于段落的开头。
尝试 white-space: none; 或添加一些填充/边距，如果您希望整个段落即使在自动换行后也有额外的空间。