空白：預不按預期工作

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">