CSS 空白：pre 未按预期工作

Question

我从服务器返回的文本包含回车（回车）。我问了一些人如何在多行中显示此文本，他们建议我使用white-space: pre。

没有white-space: pre，还有其他方法可以多行显示文本吗？或者有什么方法可以让pre 表现得像一个段落，但有多行而没有额外的填充？

这是我所拥有的：

.gallery-Gcontainer {
  margin: 0 !important;
  padding: 0;
}
#genericpartTitle,
.content {
  padding-left: 20px;
}
.content .sidebar,
.content section {
  display: inline-block;
  width: 30%;
  border: none;
  vertical-align: top;
}
.content .sidebar img {
  width: 200px;
}

<div class="gallery-Gcontainer">
  <div class="header-area">
    <h3 id="genericpartTitle">my page</h3>
    <hr>
  </div>
  <div class="content">
    <div class="sidebar">
      <img class="img-sidebar" src="https://static.pexels.com/photos/30738/pexels-photo-30738.jpg" />
    </div>
    <section>
      <h5 class="item-title">Welcome to my first page</h5>
      <p style="white-space: pre" class="description">
        Hello, anything will go here, text will come from the server like this, and I need to display it on multiple lines.
      </p>
    </section>
  </div>
</div>

更新： Putting：white-space: pre-line 按照答案中的建议，解决了 padding left 问题，但 padding-top 仍然有很大的空间。

Answer 1

用white-space: pre-line代替white-space: pre。

来自 MDN：

The white-space property

white-space 属性用于描述内部的空白 元素被处理。

正常 空白序列被折叠。源中的换行符作为其他空格处理。换行为 需要填充行框。

nowrap 像 normal 一样折叠空格，但抑制文本中的换行符（文本换行）。

pre 保留空白序列。仅在源中的换行符和<br> 元素处换行。

pre-wrap 保留空白序列。在换行符处、<br> 处换行，并根据需要填充行框。

pre-line 空格序列被折叠。在换行符处、<br> 处换行，并根据需要填充行框。

另外，您提到的padding-top 问题并不是真正的填充。在查看您的代码时，似乎在行首至少有一个换行符。

Answer 2

如果可能的话，请使用下面的 CSS javascript 代码。

var ss = " Hello`, anything will go here, text will come from the server like this, and I need to display it on multiple lines.";

document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br/>');  

或

document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br>\n');

<p id="test"> </p>