Text does not wrap between elements with white space: nowrap

Question

If I give all the children of an element white-space: nowrap, the space does not break between the elements, where it should be 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 intent of CSS is to keep pairs of words together, but to allow text breaks between elements <span>. This works in both IE and FireFox.

But in browsers based on Webkit (safari, chrome, opera), instead of overlaying too long a gap on the next line, the range is cut off.

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

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) <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

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

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

Answer 4

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

copy css paste below its work:

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

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