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

这篇具有很好参考价值的文章主要介绍了html中的换行(\n)或回车(\r)符号不起作用的解决办法、br、white、space、pre、line。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

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

html不解释空白字符

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

CSS样式的影响

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

特定的文本区域

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

white-space

MDN

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

w3school文章来源地址https://www.toymoban.com/news/detail-692688.html

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