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

您可以使用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>

Answer 2

HTML＆＃34;崩溃＆＃34;连续的空格字符，更重要的是，它处理文字和换行符＃34;就像普通的空白一样：

换行符定义为回车符（），换行符（
）或回车符/换行符对。所有换行符都构成了空格。

（source）

在这个例子中，即使我们在＆＃34;你好＆＃34;之间有多个回车符。和＃34;世界，＆＃34;它仍将它视为一个空白角色。

＆＃13;

<p>
  Hello
  
  
  
  World
</p>

＆＃13;

在这个例子中，＆＃34;你好＆＃34;之间没有空格。和＃34;世界，＆＃34;但是因为我们引入了line break元素<br>，我们确实引入了一个真正的换行符。

＆＃13;

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

＆＃13;

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

＆＃13;

p {
  white-space: pre-wrap;
}

＆＃13;

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

＆＃13;

Answer 3

要断开一条线，您只需使用标记<b/>或定义宽度

即可

就像那样

width:300px;

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

3 个答案: