我想问一下，如何在第一个元素的末尾添加不间断的空格，以便第二个元素将坚持第一个元素。我不能使用一个元素，因为第一个元素中的文字带下划线，第二个元素没有。所以我必须使用两个跨度，但我无法弄清楚如何在它们之间添加非中断空间。 （我希望数字与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>
答案 0 :(得分：0)
请记住，在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> <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
> <span class="b">(5)
</span>
</div>
答案 1 :(得分：-1)
你可以在第二个范围添加填充，如
span.b {
padding-left: 1em;
}