How can I get consecutive nowrap spans to wrap as separate elements? - html

Question

I have a block of text where I want to group words up as pairs so the two words do not break. There is an unintended consequence where when you have two <span></span> tags in a row he whole line turns into nowrap.
Example: <div><span style="white-space: nowrap;">...</span><span style="white-space: nowrap;">...</span></div>
Code below is baseline: The result will wrap at any " "(space) or "-" that the container has.
(NOTE: This example is meant to be on a responsive web-page.)
<div class="block-of-text" style="max-width: 550px">
One-two Buckle-my-shoe, Three-four Shut-the-door,
Five-six Pick-up-sticks, Seven-eight Lay-them-straight,
Nine-ten Do-it-again.
</div>
The Result of the Base line will look something like this.
|--------------- My Web Page ---------------| (550px)
| |
| One-two Buckle-my-shoe, Three-four Shut- |
| the-door, Five-six Pick-up-sticks, Seven-|
| eight Lay-them-straight, Nine-ten Do-it- |
| again. |
| |
|-------------------------------------------|
I want to make sure any hyphenated word surrounded by <span class="nowrap">...</span> stays on the same line.
Below is my attempt. (NOTE: I have One-two not surrounded by nowrap on purpose to show how it will not be included in the result.)
<style>
.nowrap {
white-space: nowrap;
}
</style>
<div class="block-of-text" style="max-width: 550px">
One-two <span class="nowrap">Buckle-my-shoe, </span>
<span class="nowrap">Three-four </span><span class="nowrap">Shut-the-door, </span>
<span class="nowrap">Five-six </span><span class="nowrap">Pick-up-sticks, </span>
<span class="nowrap">Seven-eight </span><span class="nowrap">Lay-them-straight, </span>
<span class="nowrap">Nine-ten </span><span class="nowrap">Do-it-again.</span>
</div>
My unintended result looks something like this and is NOT what I want. The <span> tags are acting as one giant nowrap.
|--------------- My Web Page ---------------| (550px)
| |
| One-two |
| Buckle-my-shoe, Three-four Shut-the-door, Five-six Pick-up-sticks, Seven-eight Lay-them-straight, Nine-ten Do-it-again.
| |
|-------------------------------------------|
What I want to have happen:
|--------------- My Web Page ---------------| (550px)
| |
| One-two Buckle-my-shoe, Three-four |
| Shut-the-door, Five-six Pick-up-sticks, |
| Seven-eight Lay-them-straight, Nine-ten |
| Do-it-again. |
| |
|-------------------------------------------|
SOLUTION
Thanks to everyone and especially #Kravimir for helping find the solution:
It works when adding style display: inline-block;, while having all spans on the same line, and adding spacing with inside the span.
<style>
.nowrap {
white-space: nowrap;
display: inline-block;
}
</style>
<div class="block-of-text" style="max-width: 550px; border: solid 1px red">
One-two <span class="nowrap">Buckle-my-shoe, </span><span class="nowrap">Three-four </span><span class="nowrap">Shut-the-door, </span><span class="nowrap">Five-six </span><span class="nowrap">Pick-up-sticks, </span><span class="nowrap">Seven-eight </span><span class="nowrap">Lay-them-straight, </span><span class="nowrap">Nine-ten </span><span class="nowrap">Do-it-again.</span>
</div>
Additional info on solution: If you put " "(space) or outside of the span it does not work as intended or you get 2 spaces between spans. Also the whitespace at the end of a line is not observed when the <span> tag is on a new line.
TLDR; Solution was edited in above.

Answer 1

Use display: inline-block.
span.nowrap {
white-space: nowrap;
display: inline-block;
}
<div class="block-of-text" style="max-width: 550px">
One-two <span class="nowrap">Buckle-my-shoe,</span>
<span class="nowrap">Three-four</span> <span class="nowrap">Shut-the-door,</span>
<span class="nowrap">Five-six</span> <span class="nowrap">Pick-up-sticks,</span>
<span class="nowrap">Seven-eight</span> <span class="nowrap">Lay-them-straight,</span>
<span class="nowrap">Nine-ten</span> <span class="nowrap">Do-it-again.</span>
</div>

Answer 2

This occurs because, without spaces between the spans, they act as characters in a single word. You need to put spaces between the spans, not inside them.
.nowrap {
white-space: nowrap;
}
<div class="block-of-text" style="max-width: 550px; border: 1px solid red">
One-two <span class="nowrap">Buckle-my-shoe,</span> <span class="nowrap">Three-four</span> <span class="nowrap">Shut-the-door,</span> <span class="nowrap">Five-six</span> <span class="nowrap">Pick-up-sticks,</span> <span class="nowrap">Seven-eight</span> <span class="nowrap">Lay-them-straight,</span> <span class="nowrap">Nine-ten</span> <span class="nowrap">Do-it-again.</span>
</div>

Answer 3

You are not closing span so
.nowrap {
white-space: nowrap;
}
<div class="block-of-text" style="max-width: 550px">
One-two <span class="nowrap">Buckle-my-shoe, </span>
<span class="nowrap">Three-four </span><span class="nowrap">Shut-the-door, </span>
<span class="nowrap">Five-six </span><span class="nowrap">Pick-up-sticks, </span>
<span class="nowrap">Seven-eight </span><span class="nowrap">Lay-them-straight, </span>
<span class="nowrap">Nine-ten </span><span class="nowrap">Do-it-again.</span>
</div>