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.

在firebug中查看内容如下所示。注意内容开头和结尾的单个空格。

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

当我在firebug中编辑内容时，它就变成了这个

"                             Lorem ipsum dolor sit amet                         "

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

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

Answer 1

尝试

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

在HTML中，在渲染时将考虑标记内容中的任何空格字符（换行符/制表符/空格）。

有关详细讨论，请参阅this question。

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

1 个答案: