6

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?

gilly3
  • 87,962
  • 25
  • 144
  • 176
  • 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 Jan 18 '14 at 08:17

4 Answers4

4

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

gilly3
  • 87,962
  • 25
  • 144
  • 176
  • +1 for the zero-width space. that worked great for me! Thanks gilly3! – Cameron Aug 04 '14 at 23:52
  • Having the best solution mentioned first would be great. – ahnbizcad May 11 '15 at 20:02
  • Which solution is best depends mostly on how you are generating your HTML. I always prefer a CSS solution, so from my perspective, the best solution is mentioned first. If you are hand coding html files that never get parsed or transformed, I can see how the last solution works better for you. – gilly3 May 11 '15 at 20:08
0
try this:

.pairs {
width: 180px;
overflow: hidden;
}
.pairs > span {
display:block;
}
Rajnish
  • 94
  • 2
  • 2
  • 10
0

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

<span style='display: inline-block;'>
ahnbizcad
  • 10,491
  • 9
  • 59
  • 85
-1

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;
}
talonmies
  • 70,661
  • 34
  • 192
  • 269
Rajnish
  • 94
  • 2
  • 2
  • 10
  • That doesn't keep the pairs on the same line. It looks no different with or without `word-wrap:break-word`. – gilly3 Jan 18 '14 at 10:13