bikeshedding CSS3 property alternative?

假如想象 提交于 2019-11-28 01:36:20

The white-space property

In CSS3, The white-space property is a shorthand for the white-space-collapsing (I guess bikeshedding means they don't know what to call it yet) and text-wrap properties. The white-space property is a CSS 2.1 property supported by most browsers and there are two values for it that collapse new lines:

  1. normal (The initial value).
  2. nowrap

But what does collapsing line feed characters mean?

According to CSS 2.1:

If 'white-space' is set to 'normal' or 'nowrap', linefeed characters are transformed for rendering purpose into one of the following characters: a space character, a zero width space character (U+200B), or no character (i.e., not rendered), according to UA-specific algorithms based on the content script.

According to CSS 3:

A zero width space before or after a white space sequence containing a newline causes the entire sequence of white space to collapse into a zero width space.

Reality:

Most browsers transform line feed characters into a space. So what you really want is to set the white-space-collapsing property to discard not collapse or to collapse and then add a zero width space character before the line break.

What to do till browser support

Remove white-space from your HTML document:

<span>A</span>
<span>B</span>

To:

<span>A</span><span>B</span>

Or:

<span>A</span><span>
    B</span>
thirtydot

There's always the most obvious fix, which is to simply remove the whitespace in the HTML:

http://jsfiddle.net/F3Mdd/1/ - it's really easy, and it just works. From this:

<div>a</div>
<div>a</div>

to this:

<div>a</div><div>a</div>

Here's a more detailed answer.

To be honest, I always just remove the whitespace...

Another approach is simply to wait for this CSS3 feature and remove the whitespace by Javascript until then.

http://jsfiddle.net/rT4Dy/2/

$('[data-bikeshedding="discard"]').each (function () {
  var node = $(this);
  node.html (node.find ('> *').detach ());
});

If I'm understanding you correctly, you mean the text-spacing property.

As far as I can tell, there isn't a lot of support.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!