css - 带有 span 的未缩进代码具有奇怪的包装行为

Question

我的 span 中有奇怪地换行的文本。我发现如果我缩进 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>

要解决它并使您的 span 保持为真正的内联元素，您可以使用 :after 伪元素在 span 之后添加一个空格:

span:after {content:' ';}

这是您的新 fiddle :http://jsfiddle.net/rgthree/67u7d/9/