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

Posted 2023-03-05

【中文标题】如何获得连续的 nowrap 跨度以包装为单独的元素？

【英文标题】：How can I get consecutive nowrap spans to wrap as separate elements?

【发布时间】：2019-10-13 14:15:21

【问题描述】：

我有一个文本块，我想将单词组合成对，这样两个单词就不会中断。有一个意想不到的后果，当您连续有两个 <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 包围的 One-two 是为了显示它不会包含在结果中。）

<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;，同时将所有跨度在同一行上，并在 inside跨度时添加间距时，它可以工作。

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

有关解决方案的其他信息：如果您将 " "(space) 或   放在跨度之外，它不会按预期工作，或者跨度之间有 2 个空格。当<span> 标记位于新行时，也不会观察到行尾的空格。

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

【问题讨论】：

jsfiddle.net/debabrata/p5y7dk4v/1。我创造了这个小提琴。它似乎正在工作。不是吗？

谢谢@DebabrataPatra 如果<span> 与第二个<span> 在同一行，他们仍在链接如果您将所有内容放在自己的行上然后运行小提琴，它似乎确实有效再次。

它仍然没有按预期工作，我的实际真实网站正在使用带有引导程序的 Angular 7，我正常提供它并使用 chrome 和 firefox 来查看编译。我看到所有跨度都关闭了正确的 css，并且似乎没有任何东西从“计算”选项卡中干扰它们。即使 JS 小提琴在“仅分隔行”时能够按预期工作，我也很困惑

正如@isherwood 在下面回答的那样，您确实需要将空间从跨度中取出。另一种选择是忘记跨度并使用non-breaking hyphens

如何添加跨度？如果是你手动做的，你可以把空格在跨度而不是在它们之间。如果它们是自动添加的（以某种方式通过魔法），您应该能够再次将其调整为在跨度之间而不是在跨度内放置空间。如果您的目标是“确保任何连字符......”并且跨度是您的尝试，您可以简单地输入不同的内容吗？为什么不？我认为这些注意事项对于解决您的问题很重要。

【参考方案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>

【讨论】：

有趣的注意：通过这样做，你会得到（取决于宽度）一些单词在视觉上会一起运行的地方，比如“Five-sixPick-up-sticks”，即使 复制/粘贴将包含空格。

是的，我没有更改 html。当所有 <span> 元素之间有空格时，就不会发生这种情况。 （我现在将对其进行编辑以进行调整。）或者，可以为每个添加一个小的右边距。

所以如果您将每个跨度放在同一行并添加一个   ，那么这 100% 有效在每个文本之后并删除每个跨度之间的空格。 Angular 也理解这一点，并且它在其服务器上正常运行。

【参考方案2】：

发生这种情况是因为跨度之间没有空格，它们充当单个单词中的字符。您需要在跨度之间放置空格，而不是在它们内部。

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

【参考方案3】：

你没有关闭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>

【讨论】：

感谢您指出

，它旨在接近我的问题但不能解决我的问题......我在我的问题中编辑了它但我仍然遇到同样的问题，即使在四次检查是否所有跨度都关闭后，我的实际真实网站代码仍然显示相同的问题。

@JamesEssex 检查一次你的空白：nowrap; css 不会被您实际真实网站中的其他 css 覆盖

它仍然没有按预期工作，我的实际真实网站正在使用带有引导程序的 Angular 7，我正常提供它并使用 chrome 和 firefox 来查看编译。我看到所有跨度都关闭了正确的 css，并且似乎没有任何东西从“计算”选项卡中干扰它们。即使 JS 小提琴在“仅分隔行”时能够按预期工作，我也很困惑