0

所以我有一个包含制表符、换行符等的 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

4

2 回答 2

4

您可以将文本包装在<pre>元素中，也可以使用可以使用的 CSSwhite-space: pre;

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

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

于 2013-08-28T17:59:14.967 回答
1

发生这种情况是因为根据 HTML 规范，浏览器会折叠空白，即任何空格、制表符和换行符字符串都被视为等同于单个空格字符。换个角度来描述，空格确实可以分隔单词，并且单词之间的空格量不会影响渲染中单词之间的间距。

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

于 2013-08-28T18:15:09.673 回答