White-space:pre-wrap causes extra spacing
<p>I'm working on making portions of a website more mobile-friendly. Rather than re-work the original pages it was decided we'd duplicate the pages needing mobile versions and redirect accordingly.</p>
<p>I have the following mark-up which looks fine on the desktop version of the page.</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;description&quot;&gt;
    &lt;asp:Literal ID=&quot;lblDescription&quot; runat=&quot;server&quot;&gt;&lt;/asp:Literal&gt;
&lt;/div&gt;
</code></pre>
<pre class="lang-css prettyprint-override"><code>.description {
    white-space: pre-wrap;
}
</code></pre>
<p>But on the mobile version, I'm getting a series of white spaces added to the beginning and end of the content. It ends up being rendered like so.</p>
<pre><code>                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare posuere efficitur. Suspendisse molestie, leo in vestibulum condimentum, ligula risus rutrum mi, a condimentum augue quam nec velit. Nullam quis elementum ipsum, vitae facilisis tellus. Integer sed turpis eget purus pellentesque suscipit eu non magna.                                              
</code></pre>
<p>Viewing the content in firebug looks like this. Notice the single white space at the beginning and end of the content.</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;description&quot;&gt; Lorem ipsum dolor sit amet &lt;/div&gt;
</code></pre>
<p>And when I edit the content in firebug it becomes this:</p>
<pre><code>&quot;                             Lorem ipsum dolor sit amet                         &quot;
</code></pre>
<p>These white spaces are not on the desktop version of the page, only the mobile version. The HTML markup and CSS are exactly the same on both versions of the page. I removed all of the other markups on the page and it still happens. If I change <code>white-space</code> to any value other than <code>pre-*</code> it looks fine. The only difference between these two pages is the addition of bootstrap and removing it doesn't make a difference.</p>
<p>Does anyone have any ideas? I need <code>white-space:pre-wrap;</code> to preserve the carriage returns.</p>