Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

whitespace nowrap on span

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,

like image 533
Mina Avatar asked Nov 19 '14 09:11

Mina


People also ask

What does white space Nowrap mean?

nowrap : Multiple whitespaces are collapsed into one, but the text doesn't wrap to the next line.

How do you put a space in a span tag?

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 .

How do I keep my span from wrapping?

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).

How do I get rid of white space in CSS?

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.


Video Answer


2 Answers

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.

like image 164
Mina Avatar answered Oct 06 '22 18:10

Mina


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 &nbsp; ).

<td>
       Some Text&nbsp;<span class="Icon"></span>
</td>
like image 23
Jukka K. Korpela Avatar answered Oct 06 '22 18:10

Jukka K. Korpela