html - 如何让连续的 nowrap 跨度包装为单独的元素？

Question

我有一个文本 block ，我想将单词成对分组，这样两个单词就不会中断。当你有两个 <span></span> 时会出现意想不到的后果连续标记，整行变成 nowrap。

示例:<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> 包围的任何带连字符的词保持在同一条线上。 以下是我的尝试。 (注意:我有一个没有被 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 帮助找到解决方案:

添加样式时有效 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；解决方案在上面进行了编辑。

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>