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.
I have the following mark-up which looks fine on the desktop version of the page.
<div class="description">
<asp:Literal ID="lblDescription" runat="server"></asp:Literal>
</div>
.description {
white-space: pre-wrap;
}
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.
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.
Viewing the content in firebug looks like this. Notice the single white space at the beginning and end of the content.
<div class="description"> Lorem ipsum dolor sit amet </div>
And when I edit the content in firebug it becomes this:
" Lorem ipsum dolor sit amet "
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 white-space to any value other than pre-* it looks fine. The only difference between these two pages is the addition of bootstrap and removing it doesn't make a difference.
Does anyone have any ideas? I need white-space:pre-wrap; to preserve the carriage returns.
