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,
nowrap : Multiple whitespaces are collapsed into one, but the text doesn't wrap to the next line.
We can use the padding-left property in a <span> element to add spaces. For example, inside the HTML body, type the text of your desire. Where you want to add the blank space, create a <span> element and apply the style in it. Set the padding-left property to 30px .
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.
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.
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 <span class="Icon"></span>
</td>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With