Text doesn't wrap properly between elements having white-space: nowrap

Question

If I give all the children of an element white-space: nowrap, white space doesn't break between the elements where it should in webkit (and blink):

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>

The intention of the CSS is to keep the word pairs together, but allow the text to break between the <span> elements. This works as expected in IE and FireFox.

But, in Webkit based browsers (safari, chrome, opera), rather than pushing a too-long span to the next line, the span gets clipped.

This is a bug in webkit (and blink), right? Is there a workaround?

Answer 1

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;
}

jsfiddle.net/VJyn2/3

HTML Technique

Add a zero-width space (U+200b) between each <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

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>

jsfiddle.net/VJyn2/7