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

文章目录

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

  ---

  前言

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

  
  （图片来源网络，侵删）

  ---

  html不解释空白字符

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

  This is the first line.
  This is the second line.
  
  
    .pre-line {
     	white-space: pre-line;
    }
  
  This is the first line.
  This is the second line.
  

  ---

  CSS样式的影响

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

  ---

  特定的文本区域

  有些元素，比如

  元素，会保留文本中的空白字符，而不会自动合并为单个空格。您可以在这些元素中尝试进行换行和回车测试。 
   
  white-space
   
  MDN
   
   
   
  white-space属性用于设置如何处理元素内的空白字符 (en-US)。
  这个属性指定了两件事：
  空白字符是否合并，以及如何合并。
  是否换行，以及如何换行。
  要使单词可以在其内部被截断，请使用overflow-wrap、word-break或hyphens代替。
   
   
  w3school
   
  

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