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

文章目录

• 前言
• html不解释空白字符
• CSS样式的影响
• 特定的文本区域
• white-space

---

前言

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

---

html不解释空白字符

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

<!-- 使用 <br> 标签进行换行 -->
<p>This is the first line.<br>This is the second line.</p>

<!-- 或者使用 CSS 属性 white-space: pre-line; -->
<style>
  .pre-line {
   	white-space: pre-line;
  }
</style>

<p class="pre-line">This is the first line.
This is the second line.</p>

---

CSS样式的影响

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

---

特定的文本区域

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

---

white-space

MDN

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

---

w3school

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承white-space属性的值。