Menu
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.
899
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks Sets this property to its default value.
Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes. break-spaces. The behavior is identical to that of pre-wrap, except that: Any sequence of preserved white space always takes up space, including at the end of the line.
Acts like the <pre> tag in HTML Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks Whitespace is preserved by the browser.
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. Whitespace is preserved by the browser. Text will only wrap on line breaks.
Try
<div class="description"><asp:Literal ID="lblDescription" runat="server"></asp:Literal></div>
In HTML any whitespace character (newline/tab/space) inside a tag's content will be considered when rendering.
See this question for more discussion.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
