白色空間：前不按預期工作

我有文本從包含回車（回車）的服務器回來。我問了一些人如何在多行上顯示這些文字，並建議我使用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>

更新： 把：白色空間：前行的答案中建議，解決了填充剩下的問題，但仍在填充頂部有一個很大的空間。

來源

2016-12-10 Jacky

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

從MDN：

The white-space property

的white-space屬性用於描述如何空格內的元件進行處理。

正常空白序列被摺疊。源中的換行符將作爲其他空白符處理。爲了填充線框必須將行分隔爲。文本中

NOWRAP崩塌空白爲normal，但抑制換行符（文本換行）。

pre保留了空格的序列。行僅在源中的換行符處和<br>元素處斷開。

預包裝保留空白的序列。線條以新行字符分隔，位於<br>，並根據需要填充線框。

pre-line空白序列被摺疊。線條以新行字符分隔，位於<br>，並根據需要填充線框。

此外，您提到的padding-top問題不是真正的填充。在查看你的代碼時，在行首看起來至少有一個換行符。

來源

2016-12-10 23:28:51

這工作，那麼爲什麼我需要使用pre？在這個問題中：http://stackoverflow.com/questions/41050367/html-rendered-in-the-page-looks-ok-but-the-actual-result-is-no – Jacky

我添加了每個值的定義。 –

是的，我在閱讀完MDN之後回答了我的問題，但是沒有提到填充任何內容 – Jacky

使用「display：block」作爲你的css樣式。這應該打破新的路線。

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

來源

2016-12-10 23:26:15

我以爲p標籤默認已經有顯示塊.. – Jacky

是的，但是因爲您之前無意中刪除了顯示。如果這不起作用，請嘗試使用「」在所需元素之間創建間距。 –

白色空間：前不按預期工作

回答

相關問題