<p> 标签在存在换行符时将所有文本放在一行上

Question

基本上我有一个网页，显示案例客户的描述。

所发生的情况是，此描述随后显示在段落标记中，但它将所有内容放在一行上。通常，当您有段落标记但字符串太长并且溢出时会发生这种情况，但这里不是这种情况。

例子。

这就是网页中描述的显示方式。

 Description

 hjkhjkhj sfgsdfgsdfghjkfjkfghjfghjfgh hjkgh jhkfghjkghjkgh jhkghjkg fjghjfghjfghjfghj fghdfhd fghfgdhfghdfghd  x  x x  ^^^^^^

当我进入 DOM 资源管理器并查看

标签本身，这就是它向我展示的内容。

<p>hjkhjkhj


sfgsdfgsdfghjkfjkfghjfghjfgh

hjkgh
jhkfghjkghjkgh
jhkghjkg
fjghjfghjfghjfghj

fghdfhd


fghfgdhfghdfghd

 &nbsp;x&nbsp;
 x&nbsp;x&nbsp;





                            ^^^^^^</p>

它显示了应该出现的换行符，但这并没有转换为网页本身。

只是想知道以前是否有人遇到过这个？或者如果有人知道一些 CSS 可以解决这个问题。

Answer 1

HTML“折叠”连续的空白字符，更重要的是，它将文字“换行符”视为普通的空白：

换行符定义为回车符 ( 
)、换行符 ( 
) 或回车符/换行符对。所有换行符均构成空白。

（来源）

在此示例中，即使我们在“hello”和“world”之间有多个回车符，它仍然将其视为一个空白字符。

<p>
  Hello
  
  
  
  World
</p>

在此示例中，“hello”和“world”之间没有空格，但因为我们引入了换行符元素<br>，所以我们确实引入了真正的换行符。

<p>
  Hello<br>World
</p>

正如其他人提到的，如果您想在不引入<br>元素的情况下保留空白，您可以使用 CSS 来预先格式化段落标记。即，使用white-space属性 ( source ) 并将其值更改为pre-wrap。

p {
  white-space: pre-wrap;
}

<p>
  Whitespace here
  
  is      maintained!
</p>