CSS white-space: pre not working as expected
<p>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 <code>white-space: pre</code>.</p>
<p>Is there any other way to display the text on multiple lines without <code>white-space: pre</code>? Or any way to make <code>pre</code> act like a paragraph but with multiple lines without having the extra padding?</p>
<p>Here's what I have:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="gallery-Gcontainer"&gt;
  &lt;div class="header-area"&gt;
    &lt;h3 id="genericpartTitle"&gt;my page&lt;/h3&gt;
    &lt;hr&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;
    &lt;div class="sidebar"&gt;
      &lt;img class="img-sidebar" src="https://static.pexels.com/photos/30738/pexels-photo-30738.jpg" /&gt;
    &lt;/div&gt;
    &lt;section&gt;
      &lt;h5 class="item-title"&gt;Welcome to my first page&lt;/h5&gt;
      &lt;p style="white-space: pre" class="description"&gt;
        Hello, anything will go here, text will come from the server like this, and I need to display it on multiple lines.
      &lt;/p&gt;
    &lt;/section&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p><strong>Update:</strong>
Putting: <code>white-space: pre-line</code> as suggested in the answers, solved the padding left issue, but still there's a big space in padding-top.</p>