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>

更新放置：白色空间：答案中建议的前置线，解决了填充左侧问题，但仍然在填充顶部有一个很大的空间。

Answer 1

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

来自MDN：

The white-space property

white-space属性用于描述内部空格   该元素得到处理。

正常空白的序列已折叠。源中的换行符作为其他空格处理。打破行   必须填写线框。

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

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

预包装 保留空白序列。换行字符在换行符<br>处断开，并根据需要填充换行符。

预行空白的序列已折叠。换行字符在换行符<br>处断开，并根据需要填充换行符。

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

Answer 2

使用＆＃34;显示：块＆＃34;作为你的CSS风格。这应该突破新的界限。

<p style="display: block" class="description">

Answer 3

如果可能，请在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>

白色空间：预先不按预期工作

3 个答案: