Как я могу сделать так, чтобы последовательные промежутки nowrap были обернуты как отдельные элементы?

У меня есть блок текста, в котором я хочу сгруппировать слова по парам, чтобы два слова не разбивались. Существует непреднамеренное последствие, когда у вас есть два тега <span></span> подряд, вся строка превращается в раппорт.

Пример: <div><span style = "white-space: nowrap;">...</span><span style = "white-space: nowrap;">...</span></div>

Код ниже является базовым: результат будет перенесен на любой " "(пробел) или "-", который есть в контейнере. (ПРИМЕЧАНИЕ: Этот пример предназначен для адаптивной веб-страницы.)

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

Результат базовой строки будет выглядеть примерно так.

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

Я хочу убедиться, что любое слово через дефис, окруженное <span class = "nowrap">...</span>, остается на одной строке. Ниже моя попытка. (ПРИМЕЧАНИЕ: у меня есть One-two, которые я специально не обрамляю nowrap, чтобы показать, как они не будут включены в результат.)

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

Мой непреднамеренный результат выглядит примерно так и НЕ является тем, что я хочу. Теги <span> действуют как один гигант 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.
|                                           |
|-------------------------------------------|

Что я хочу, чтобы произошло:

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

РЕШЕНИЕ

Спасибо всем и особенно @Кравимир за помощь в поиске решения:

Это работает при добавлении стиля display: inline-block;, когда все интервалы находятся в одной строке, и добавлении интервала с помощью  внутри интервала.

<style>
  .nowrap {
    white-space: nowrap;
    display: inline-block;
  }
</style>

<div class = "block-of-text" style = "max-width: 550px; border: solid 1px red">
  One-two&nbsp;<span class = "nowrap">Buckle-my-shoe,&nbsp;</span><span class = "nowrap">Three-four&nbsp;</span><span class = "nowrap">Shut-the-door,&nbsp;</span><span class = "nowrap">Five-six&nbsp;</span><span class = "nowrap">Pick-up-sticks,&nbsp;</span><span class = "nowrap">Seven-eight&nbsp;</span><span class = "nowrap">Lay-them-straight,&nbsp;</span><span class = "nowrap">Nine-ten&nbsp;</span><span class = "nowrap">Do-it-again.</span>
</div>

Дополнительная информация о решении: Если вы поместите " "(пробел) или   за пределы промежутка, он не будет работать должным образом или вы получите 2 пробела между промежутками. Также пробел в конце строки не наблюдается, когда тег <span> находится на новой строке.

TLDR; Решение было отредактировано выше.