两个元素之间的不间断空格

Question

我想问，如何在第一个元素的末尾添加不间断空格，以便第二个元素粘在第一个元素上。我无法使用一个元素，因为第一个元素中的文本有下划线，第二个元素没有。所以我必须使用两个跨度，但我不知道如何在它们之间添加不间断空格。（我希望数字与 lastText 位于同一行）

div {
  width: 105px;
  border: 1px solid #000;
}

span.a {
  text-decoration: underline
}

span.b {
  color: orange;
}

<div>
    <span class="a">
        Text, text, Text, Text, lastText
    </span>
    <span class="b">
        (5)
    </span>
</div>

Answer 1

请记住，在 HTML 中，所有空白（包括换行符和缩进）都会折叠为一个空格。因此，要执行您想要的操作，您需要在第一个跨度的末尾没有任何空格，在其结束标记结束之后在其后面的之前没有空格，在下一个跨度的开始标记 之间没有空格，并且之前的下一个跨度的开头没有空格： (5)

div {
  width: 105px;
  border: 1px solid #000;
}

span.a {
  text-decoration: underline
}

span.b {
  color: orange;
}

<div>
    <span class="a">
      Text, text, Text, Text, lastText</span>&nbsp;<span class="b">(5)
    </span>
</div>

不过，这往往会隐藏源代码中的跨度，从维护的角度来看，这可能会很痛苦。因此，您会经常看到人们将换行符和缩进放在标签内：

div {
  width: 105px;
  border: 1px solid #000;
}

span.a {
  text-decoration: underline
}

span.b {
  color: orange;
}

<div>
    <span class="a">
      Text, text, Text, Text, lastText</span
    >&nbsp;<span class="b">(5)
    </span>
</div>