最近我正在编辑其他人的代码,我注意到空格的使用类似于以下内容：
<div>Some text Some other text</div>
我自然地认为浏览器会组合额外的空间,所以这实际上只是四个空格.虽然测试了这个 – 它实际上是7个空格(至少在chrome中)！这是因为浏览器渲染空间和空间.空间也是如此.
所以我的问题是,浏览器何时会渲染空白区域,什么时候不会呢？换句话说,何时会渲染单个空格字符而忽略？
JSFiddle演示：http://jsfiddle.net/L7x7t/3/
解决方法
浏览器仅折叠连续的常规空格字符.文本呈现主要由CSS规范而不是HTML规范(有例外)管理;关于空白崩溃,section 16.6.1 of CSS2.1有详细信息.特别：
any space (U+0020) following another space (U+0020) — even a space before the inline,if that space also has ‘white-space’ set to ‘normal’,‘nowrap’ or ‘pre-line’ — is removed.
由于有一个不间断的空格将每两个空格字符分开,否则它们将是连续的(并且不间断的空格不被视为“常规”空格字符),浏览器没有机会折叠它们中的任何一个,因此必须渲染全部他们按顺序.
除了a nasty bug in Chrome regarding the part about “a space before the inline”之外,跨浏览器的行为大多相同.
