【发布时间】：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;，同时将所有跨度在同一行上，并在&nbsp;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 <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>
有关解决方案的其他信息：如果您将 " "(space) 或 &nbsp; 放在跨度之外，它不会按预期工作，或者跨度之间有 2 个空格。当<span> 标记位于新行时，也不会观察到行尾的空格。
TLDR;解决方案在上面进行了编辑。
【问题讨论】：
-
jsfiddle.net/debabrata/p5y7dk4v/1。我创造了这个小提琴。它似乎正在工作。不是吗？
-
谢谢@DebabrataPatra 如果
<span>与第二个<span>在同一行，他们仍在链接如果您将所有内容放在自己的行上然后运行小提琴，它似乎确实有效再次。 -
它仍然没有按预期工作，我的实际真实网站正在使用带有引导程序的 Angular 7，我正常提供它并使用 chrome 和 firefox 来查看编译。我看到所有跨度都关闭了正确的 css，并且似乎没有任何东西从“计算”选项卡中干扰它们。即使 JS 小提琴在“仅分隔行”时能够按预期工作，我也很困惑
-
正如@isherwood 在下面回答的那样，您确实需要将空间从跨度中取出。另一种选择是忘记跨度并使用non-breaking hyphens
-
如何添加跨度？如果是你手动做的，你可以把空格在跨度而不是在它们之间。如果它们是自动添加的（以某种方式通过魔法），您应该能够再次将其调整为在跨度之间而不是在跨度内放置空间。如果您的目标是“确保任何连字符......”并且跨度是您的尝试，您可以简单地输入不同的内容吗？为什么不？我认为这些注意事项对于解决您的问题很重要。
标签： html angular twitter-bootstrap css