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

5
votes

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.

works as expected in IE and FF

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

text gets clipped in webkit

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

4
cssgoogle-chromewebkitblink
The text gets wrapped, as you can see in the fiddle and in the screenshot: the 3rd span is wrapped to the next line, and then the 5th to a new line. This seems to be a bug in the way Chrome wraps, not in not wrapping at all. It seems that it does not calculate the widths of elements properly. The clipping is of course then caused by the oveflow: hidden declaration. - Jukka K. Korpela

4 Answers

3
votes

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

0
votes
try this:

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

Adding display: inline-block; on adjacent span elements should help:

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

just remove white-space property and use word-wrap.

copy paste css below its working:

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

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