Manage text overflow with a span inside a div inside a table cell

Question

I've a long text inside a span element and I want to truncate it using ellipsis. The span element is inside a div element which is inside a table cell.

How can I truncate the long text at the size of the cell.

Here the HTML code snippet:

<table>
 <tr>
   <td>
     <div> 
       <span>
         this is a long sentence to test the text overflow
       </span>
     </div>
   </td>
 </tr>

And the CSS code:

table {
 width: 50px;
 table-layout: fixed;
}

td {
 border: 1px solid red;
}

span {
 white-space: nowrap;
 text-overflow: ellipsis;
}

Here my case in JSFiddle: http://jsfiddle.net/Fedy2/wG3CF/

Answer 1

Test this example my friends!

 span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    width:100%;
    display:block;
}

Here the updated JSFiddle snippet: http://jsfiddle.net/Fedy2/wG3CF/3/

Answer 2

Is it necessary to use <span>?

Its working in <p> tag.

http://jsfiddle.net/aashi/wG3CF/2/