如何获得连续的 nowrap 跨度以将其包装为单独的元素？

Question

我有一段文本，我想将其中的单词分组为对，这样两个单词就不会被破坏。有一个意想不到的结果，当你<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.                             |
|                                           |
|-------------------------------------------|

解决方案

感谢大家，特别是@Kravimir帮助找到解决方案：

它在添加 style 时起作用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>当标签位于新行时，也不会观察到行尾的空格。

太长了；解决方案已在上面编辑。

Answer 1

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