两个元素之间的非破坏空间

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>

Answer 2

你可以只添加填充到第二跨度像

span.b { padding-left: 1em; }