空白：预不按预期工作

Question

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

有没有其他方法可以在没有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使用white-space: pre-line 。

来自 MDN：

white-space属性

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

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

nowrap像normal一样折叠空白，但禁止文本中的换行符（文本换行）。

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

pre-wrap保留了空白序列。 在换行符、 <br>以及根据需要填充行框时换行。

前行空白序列被折叠。 在换行符、 <br>以及根据需要填充行框时将换行。

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

Answer 2

如果可能，请使用以下 javascript 代码进行 CSS。

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>

Answer 3

使用“display:block”作为你的 css 样式。 这应该打破到新的行。

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