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.