在 html 中,显示文本段落时,希望保持空格,换行该怎么做

2023-04-08by@timqian&@ChatGPT.Model: gpt-3.5
timqian

在 html 中,显示文本段落时,希望保持空格,换行该怎么做

Avatar
Avatar

可以使用 HTML 中的换行标签 <br> 来实现换行,使用空格实体 &nbsp; 来保持空格,例如:

<p>这是第一行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是第二行<br>这是第三行</p>

以上代码会显示三行文本,第一行有多个空格,第二行有换行和多个空格,第三行只有换行。

timqian

如果这段文本是从服务端传回来的,里面不带 &nbsp;<br> 而是 以及 /n 该怎么办

Avatar
Avatar

可以使用 CSS 样式 white-space: pre-wrap; 来保留原始文本中的空格和换行,例如:

<p style="white-space: pre-wrap;">这是第一行      这是第二行
这是第三行</p>

以上代码会显示三行文本,第一行有多个空格,第二行有换行和多个空格,第三行只有换行。pre-wrap 属性会保留文本中的空格和换行,并且自动换行。