hyperlink is dropped to new line

Question

This is my aspx code,

<div class="ellipsis">
Body Text Body Text Body Text Body Text Body   
Text Body Text Body Text Body Text Body !!!
</div>
<asp:HyperLink ID="HyperLink1" runat="server">
    <span style="color: Maroon; font-style: italic; font-size: small;">
        More..
    </span>
</asp:HyperLink>

CSS

.ellipsis
{ 
    width:               250px;
    white-space:         nowrap;
    overflow:            hidden;
    text-overflow:       ellipsis;
    -o-text-overflow:    ellipsis;
    -ms-text-overflow:   ellipsis;
    -moz-binding:        url('ellipsis.xml#ellipsis');
}

I want to show single line likes

 Body Text Body Text ...More..

But the hyperlink HyperLink1 is dropped to new line . How can I fix it ?

This is Fiddle !

Answer 1

Add a style:

float:left;

to both the div and the link

Answer 2

I would not recommend using floats for this. While it does do the trick, it changes the layout of the page and is unneccessary for such a small change. It would be just as easy to fix by changing the display type of the div to inline-block.

.ellipsis
{
  display: inline-block;
  ...
}

Here is a fiddle: http://jsfiddle.net/JntkC/2/

Answer 3

Adding the style to the div works. See the updated version of your fiddle http://jsfiddle.net/JntkC/1/

Add this line to the CSS

float: left;