whitespace nowrap on span

Question

In this case:

<td>
       Some Text
       <span class="Icon"></span>
</td>

I want to get the line break when necessary on my Text but I don't want my span to get on a new line, I want it to always stick to part of the text. How can I do it?

Thanks,

Vignola

can you clarify for the 3 things: you have Some Text, and then "my Text", and then "the text" -- what are they exactly? – Delusion

well, I am referring to Some Text in the description by using my Text and the text (since we only have "Some Text" in the code?!?!?) – Vignola

So you want the span element always to be next the the text ? If you don't want the span to get on a new line, set the display to inline-block... and it will always stick to part of the text , exactly what you asked, unless i don't understand the question – Labroid

You should include sufficient code to actually reproduce the issue. In particular, you should show the relevant part of the styling or scripting that makes the span element display at all; in the code posted, it is an element with empty content and no style. – Tran

Answer 1

How I solved my problem by putting one span into the other:

<table style="width:100px">
<tr>
    <td>
        I am Showing you what <span style=" white-space: nowrap;">I meant
        <span> Blah Blah </span></span>
    </td>

</tr>

Check JSFiddle.

Vignola

Answer 2

Replace all whitespace before the span with a single no-break space (if you want some spacing to appear between your text and whatever rendering you have styled for the span; if no spacing is desired, omit the   ).

<td>
       Some Text&nbsp;<span class="Icon"></span>
</td>

Tran