html中的换行(\n)或回车(\r)符号不起作用的解决办法、br、white、space、pre、line

前言

如果您的HTML中的换行和回车符号（\n和\r）似乎不起作用，可能有几种可能的原因：

html不解释空白字符

在HTML中，连续的空白字符（包括换行和回车符号）通常会被解释为单个空格。这是HTML的默认行为，旨在确保页面显示一致性和可读性。如果您希望在页面上实际显示换行，您需要使用HTML标签
或者CSS属性white-space: pre-line;。

<p>This is the first line.<br>This is the second line.p>


<style>
  .pre-line {
   	white-space: pre-line;
  }
style>

<p class="pre-line">This is the first line.
This is the second line.p>
1
2
3
4
5
6
7
8
9
10
11
12

CSS样式的影响

您可能已经应用了某些CSS样式，导致换行和回车不起作用。检查您的CSS文件，查看是否有设置white-space或display等属性可能影响了文本的显示方式。

特定的文本区域

有些元素，比如

元素，会保留文本中的空白字符，而不会自动合并为单个空格。您可以在这些元素中尝试进行换行和回车测试。
 

white-space

MDN

white-space属性用于设置如何处理元素内的空白字符 (en-US)。
这个属性指定了两件事：
空白字符是否合并，以及如何合并。
是否换行，以及如何换行。
要使单词可以在其内部被截断，请使用overflow-wrap、word-break或hyphens代替。

w3school

标签。