浏览器的空白渲染 [英] Browser white space rendering

问题描述

 < div> 
我最近编辑别人的代码，一些文字& nbsp; &安培; NBSP; &安培; NBSP;其他一些文字< / div> 
  

我自然认为浏览器会结合多余的空格，所以这实际上只有四个空格。测试一下 - 它实际上是7个空格（至少在chrome中）！这是因为浏览器同时渲染了和中的 空格。

所以我的问题是，浏览器什么时候会渲染空白区域，何时不会？换句话说，何时会渲染一个空格字符而忽略它？

JSFiddle演示： http://jsfiddle.net/L7x7t/3/

解决方案

浏览器只会折叠连续的常规空格字符。文本渲染主要由CSS规范而不是HTML规范来管理（有例外）;关于空白崩溃， CSS2.1的第16.6.1节有详细信息。特别是：

任何空格（U + 0020）跟在另一个空格之后（U + 0020） - 即使是内联之前的空格，如果该空格还有'white-space'被设置为'normal'，'nowrap'或'pre-line' - 被删除。

有一个非破坏性空间将每隔两个空格字符分隔开来，否则这些空格字符会连续出现（并且非空白空格不被视为常规空格字符），因此浏览器没有机会折叠它们中的任何一个，因此必须渲染它们全部按照顺序排列。

跨浏览器的行为大部分是相同的，除了 Chrome中关于内联之前的空间部分的一个令人讨厌的错误。

Recently I was editing someone else's code and I noticed that spaces were used something like the following:

<div>Some text &nbsp; &nbsp; &nbsp; Some other text</div>

I naturally assumed that the browser would combine the extra spaces, so this is really just four spaces. Testing this out though - it is actually 7 spaces (in chrome at least)! This is because the browser renders both the in between spaces and the nbsp; spaces as well.

So my question is, when will the browser render white space and when won't it? In other words, when will a single space character be rendered vs ignored?

JSFiddle Demo: http://jsfiddle.net/L7x7t/3/

解决方案

Browsers only collapse consecutive regular space characters. Text rendering is mostly governed by the CSS spec rather than the HTML spec (with exceptions); with respect to whitespace collapsing, section 16.6.1 of CSS2.1 has the details. Specifically:

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.

Since there's a non-breaking space separating every two space characters that would otherwise be consecutive (and non-breaking spaces are not considered "regular" space characters), the browser has no opportunity to collapse any of them, and so must render all of them in sequence.

The behavior across browsers is mostly identical, except for a nasty bug in Chrome regarding the part about "a space before the inline".

这篇关于浏览器的空白渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！