html - CSS 空白 : pre not working as expected

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，解决了 padding left 问题，但 padding-top 中仍然有很大的空间。

Answer 1

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

来自 MDN:

The white-space property

The white-space property is used to describe how whitespace inside the element is handled.

normal Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.

nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.

pre-wrap Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

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