CSS 空白：预不能按预期工作

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>

更新： 放置： white-space: pre-line 如答案中所建议，解决了填充左问题，但填充顶部仍有很大空间。

原文由 Jacky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

而不是 white-space: pre 使用 white-space: pre-line 。

来自 MDN：

white-space 属性

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

normal 空白序列被折叠。源中的换行符作为其他空白字符处理。根据需要换行以填充行框。

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

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

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

前行 空白序列被折叠。在 <br> 的换行符处换行，并根据需要填充行框。

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

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议