允许比HTML中的一个空格更多的空格

Question

所以我有一个包含制表符，换行符等的div。但出于某种原因，div一起显示所有内容......

这是一个示例div：

<div>
    the(5 spaces after this)     re is a tab here      and now I break line
    twice now

            there are two tabs before me too
</div>

为什么会发生这种情况？如何将其与原始空白区域一起使用？

jsfiddle

Answer 1

您可以将文字包装在<pre>元素中或使用可以使用的CSS white-space: pre;

div {
   white-space: pre; /* or pre-wrap if you want wrapping */
}

http://jsfiddle.net/yTEm3/4/

Answer 2

这是因为根据HTML规范，浏览器collapse white space，即任何空格，制表符和换行符被视为等同于单个空格字符。从另一个角度来看，空格确实会分隔单词，单词之间的空白量不会影响渲染中单词之间的间距。

每当这成为一个问题时，你应该考虑内容和结构究竟是什么。也许您应该使用table元素来呈现表格数据，或者使用CSS来调整间距。使用pre元素或CSS设置white-space: pre应该被视为最后的手段或快速而肮脏的技巧，因为它实际上意味着逃避HTML世界并要求浏览器充当简单的纯文本内容的渲染器。