css - 文本未在具有空白 : nowrap 的元素之间正确换行

Question

如果我给一个元素的所有子元素 white-space: nowrap ，空白不会在 webkit 中应在的元素之间中断(和闪烁):

jsfiddle.net/VJyn2

.pairs {
    width: 180px;
    overflow: hidden;
}
.pairs > span {
    white-space: nowrap;
}

<div class="pairs">
    <span>
        <strong>bread:</strong>
        <em>crust</em>
    </span>
    <span>
        <strong>watermelon:</strong>
        <em>rind</em>
    </span>
    ...
</div>

CSS 的目的是将单词对保持在一起，但允许文本在 <span> 之间中断元素。这在 IE 和 FireFox 中按预期工作。

但是，在基于 Webkit 的浏览器(safari、chrome、opera)中，不是将太长的 span 推到下一行，而是将 span 剪掉。

这是 webkit(和闪烁)中的错误，对吧？有解决方法吗？

Answer 1

从今天开始(Chrome v42)这个错误不再是问题。 Chrome 已修复渲染错误，因此不再需要以下解决方法。

这里没什么可看的，继续前进。

---

有几种方法可以解决此错误。以下是三个选项:

CSS 技术

使用 float: left .除了使其正确换行外，这还将折叠跨度之间的空白，因此添加 margin-right

.pairs > span {
    white-space: nowrap;
    float: left;
    margin-right: 0.5em;
}

jsfiddle.net/VJyn2/3

HTML 技术

添加 zero-width space ( U+200b ) 在每个 <span> 之间:

<div class="pairs">
    <span>
        <strong>bread:</strong>
        <em>crust</em>
    </span>
    &#x200b;
    <span>
        <strong>watermelon:</strong>
        <em>rind</em>
    </span>
    &#x200b;
    <span>
        <strong>banana:</strong>
        <em>peel</em>
    </span>
    ...
</div>

jsfiddle.net/VJyn2/2

更好的 HTML 技术

事实证明，要使其正常工作所需要做的就是将 span 元素放在 HTML 中的同一行上:

<div class="pairs">
    <span><strong>bread:</strong> <em>crust</em></span>
    <span><strong>watermelon:</strong> <em>rind</em></span>
    <span><strong>banana:</strong> <em>peel</em></span>
    ...
</div>

jsfiddle.net/VJyn2/7