空白：预不按预期工作

Question

I have text coming back from the server containing carriage return (enter). I asked some people what to do to display this text on multiple lines, and they advised me to use the white-space: pre .

Is there any other way to display the text on multiple lines without white-space: pre ? Or any way to make pre act like a paragraph but with multiple lines without having the extra padding?

Here's what I have:

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

Update: Putting: white-space: pre-line as suggested in the answers, solved the padding left issue, but still there's a big space in padding-top.

Answer 1

Instead of white-space: pre use white-space: pre-line .

From 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.

Also, the padding-top issue you mention isn't really padding. In looking at your code there appears to be at least one line break at the start of the line.

Answer 2

If possible then use below javascript code for 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/>');  

or

document.getElementById('test').innerHTML = ss.replace(/\n/g, '<br>\n');

<p id="test"> </p>

Answer 3

use "display:block" as your css styling. This should break onto new line.

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