带有跨度的未缩进代码具有奇怪的包装行为

Question

我的文字在跨度中奇怪地包裹着。我已经解决了如果我缩进html它修复了问题。

这很好：

<div class="value">
    <span>56959 bqCYXFYS</span>
    <span>MBIaLbJm</span>
    <span>SW6 6PN</span>
</div>

这不是：

<div class="value"><span>56959 bqCYXFYS</span><span>MBIaLbJm</span><span>SW6 6PN</span></div>

此CSS仅用于说明目的：

.value {
    background: grey;
}
span:first-of-type {
    color: red;
}
span:nth-of-type(2) {
    color: green;
}
span:nth-of-type(3) {
    color: gold;
}

在下面的屏幕截图中，我手动缩小div.value以进行文本换行。缩进代码的顶部屏幕截图是正确的，未缩减代码的第二个屏幕截图是以我需要防止的奇怪方式包装的。

我怎样才能用CSS解决这个问题？我根本无法改变HTML结构。

未缩进的代码示例：http://jsfiddle.net/67u7d/7/

缩进代码示例：http://jsfiddle.net/67u7d/6/

Answer 1

当有空格时会发生包装，但由于你的跨度之间没有空格（甚至是换行符和制表符），所以这一切都不会破坏。

就破坏而言，这些是相同的：

<div class="value"><span>56959 bqCYXFYS</span><span>MBIaLbJm</span><span>SW6 6PN</span></div>
<div class="value">56959 bqCYXFYSMBIaLbJmSW6 6PN</div>

要解决此问题并将您的跨度保持为真正的内联元素，您可以使用:after伪元素在跨度后添加空格：

span:after {content:' ';}

这是你的新小提琴：http://jsfiddle.net/rgthree/67u7d/9/

Answer 2

如果您将display: inline-block添加到span标记，则会正确换行。