As of today (Chrome v42) this bug is no longer an issue. Chrome has fixed the rendering bug, so the below work around is no longer necessary.
Nothing to see here, move along.
There are a few ways to work around this bug. Here are three options:
CSS Technique
Use float: left
. Besides making it wrap correctly, this will also collapse the whitespace between the spans, so add a margin-right
as well.
.pairs > span {
white-space: nowrap;
float: left;
margin-right: 0.5em;
}
HTML Technique
Add a zero-width space (U+200b
) between each <span>
:
<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>
A Better HTML Technique
It turns out, all that is required to get this to work properly is to put the span elements on the same line in the 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>