CSS内联块空格

Question

我需要在内联块中渲染空白区域而不是空格，我不会渲染任何东西。我无法弄清楚CSS错在哪里。

CSS：

.foo {
    display:inline-block;
}

HTML：

<span class="foo">a</span><span class="foo"> </span><span>class="foo">b</span>

http://jsfiddle.net/q7dtevce/

Answer 1

为避免在元素中修剪或以其他方式更改空格，您可以使用white-space: pre-wrap。

.foo {
    display: inline-block;
    white-space: pre-wrap;
}

Updated fiddle

Answer 2

我相信你只需要通过将标记改为此来强制它进行布局：

<span class="foo">a</span>
<span class="foo">&nbsp;</span>
<span class="foo">b</span>

要查看差异，请在其周围添加边框，然后将其删除（ ） 在这里：http://jsfiddle.net/q7dtevce/4/