Question

我有一段文本要在其中将单词成对分组，以使两个单词不会中断。有一个意想不到的结果，当您连续有两个标签时，他的整行变成了nowrap。

示例：<div>......</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.                                   |
|                                           |
|-------------------------------------------|

我想确保用...括起来的所有连字词保持同一行。以下是我的尝试。（注意：我有两个故意不被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>

我的意外结果看起来像这样，不是我想要的。 标签起着一个巨大的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个空格。另外，当标签位于新行上时，也不会观察到行尾的空白。

TLDR；解决方案已在上面进行了编辑。

Answer 1

之所以会这样，是因为跨度之间没有空格，它们在单个单词中充当字符。您需要在跨度之间放置空格，而不是在它们之间。

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

您没有关闭span，所以

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

Answer 3

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

如何获得连续的nowrap跨距包装为单独的元素？

解决方案

3 个答案: