& lt; p>当存在换行符时，将所有文本放在一行上的标记

<p> tag putting all text on one line when line breaks exist

本文关键字：一行 lt 存在 换行符 文本      更新时间：2023-09-26

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

发生的是这个描述然后被显示在段落标签中，但它将所有内容放在一行。通常情况下，当你有一个段落标签，但字符串太长，它溢出时，会发生这种情况，但这里不是这种情况。

的例子。

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

 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

HTML "连续的空白字符，更重要的是，它处理文字"换行字符";就像普通的空格:

换行定义为回车(&#x000D;)、换行(&#x000A;)或回车/换行对。所有换行符构成空白。

(源)

在这个例子中，尽管我们在"hello"之间有多个回车"answers"世界;它仍然将其视为一个空白字符。

<p>
  Hello
  
  
  
  World
</p>

在这个例子中，我们在"hello"answers"世界;但是因为我们引入了换行元素<br>，我们确实引入了一个真正的换行。

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

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

p {
  white-space: pre-wrap;
}
<p>
  Whitespace here
  
  is      maintained!
</p>

使用css很容易做到这一点。就像

p {
  white-space: pre;
}

是可行的。还有其他选项，如pre-wrap和pre-line。在MDN上可以找到差异。

p {
  white-space: pre;  
}
<p>hjkhjkhj
sfgsdfgsdfghjkfjkfghjfghjfgh
hjkgh
jhkfghjkghjkgh
jhkghjkg
fjghjfghjfghjfghj
fghdfhd
fghfgdhfghdfghd
 &nbsp;x&nbsp;
 x&nbsp;x&nbsp;

                            ^^^^^^</p>

要换行，你可以简单地使用标签<b/>或定义宽度

就像那样

width:300px;
相关文章：