白色空间：预包装导致额外空间

Question

我正在努力使部分网站更加便于移动。我们决定重复需要移动版本并相应地重定向的页面，而不是重新处理原始页面。

我有以下标记在页面的桌面版本看起来很好。

<div class="description"> 
    <asp:Literal ID="lblDescription" runat="server"></asp:Literal> 
</div> 

.description { white-space: pre-wrap; } 

但是在移动版本中，我在内容的开始和结尾添加了一系列空格。它最终被渲染得如此。

       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.            

查看萤火虫内容看起来像这样。注意内容开始和结尾处的单个空白区域。

<div class="description"> Lorem ipsum dolor sit amet </div> 

当我在Firebug编辑的内容就成了这个

"        Lorem ipsum dolor sit amet       " 

这些白色空间是不是在页面的桌面版本中，只有手机版。 html标记和css在这两个版本的页面上完全相同。我删除了页面上的所有其他标记，但仍然发生。如果我将空格更改为除*之外的任何值，它看起来很好。这两页之间的唯一区别是增加了bootstrap，删除它并没有什么不同。

有没有人有任何想法？我需要空格：预先包装以保留回车。

Answer 1

尝试

<div class="description"><asp:Literal ID="lblDescription" runat="server"></asp:Literal></div> 

在HTML标签的内容内的任何空白字符（换行/标签/空间）将呈现时予以考虑。

有关更多讨论，请参阅this question。