2つの要素間の非分割領域

Question

最初の要素の最後に非改行スペースを追加して、2番目の要素が最初の要素に固執するようにする方法をお伺いします。最初の要素のテキストには下線が引かれているため、1つの要素を使用することはできません。だから私は2つのスパンを使用する必要がありますが、私はそれらの間に壊れないスペースを追加する方法を見つけることができません。 （私は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に、（改行とインデントを含む）すべての空白が1つのスペースに崩壊することを忘れないでください。あなたが望むことをするには、最初のスパンの最後に空白を入れずに、閉じたタグの後に空白を入れずに、それに続く の前に空白を入れずに、 と次のスパンの開始タグの間に空白を入れないメンテナンスから痛みをすることができ、しかし、ソースにスパンを非表示にする傾向がある

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>

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

Answer 2

あなただけ

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