文本无法在具有空白区域的元素之间正确包装：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）中，而不是将太长的跨度推到下一行，跨度会被剪裁。

这是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技术

在每个U+200b：

之间添加zero-width space（<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

Answer 2

try this:

.pairs {
width: 180px;
overflow: hidden;
}
.pairs > span {
display:block;
}

Answer 3

在相邻的span元素上添加display: inline-block;应该会有所帮助：

<span style='display: inline-block;'>

Answer 4

删除white-space属性并使用自动换行。

将粘贴css复制到其工作之下：

.pairs {
width: 180px;
overflow: hidden;
}

.pairs > span {
word-wrap:break-word;
}