Question

I have this requirement. I need to design a table with 3 rows (each row will have only one td).

1. Table will have a fixed width. First 2 rows will be 1 line each and
   content will be truncated if it is exceeding 1 line.

   I managed this by using style = "white-space: nowrap !important;" for the first two rows

2. The third row will have a large text and it should occupy 3 lines
   and the contents that could not be displayed within 3 lines will be
   truncated. I am struck and not sure how to achieve this.

Can any one help on this ?

    <table style='table-layout:fixed'> 
    <tbody>
      <tr>
        <td align="left" style = "white-space: nowrap !important;">Some text1 </td>
      </tr>
      <tr>
        <td align="left" style = "white-space: nowrap !important;">Some text2 </td>
      </tr>
      <tr>
        <td align="left">Really long text... </td>
      </tr>
    </tbody>
    </table>

Answer 1

Have you tried setting a height for each tr or td and then use overflow:hidden?
http://jsfiddle.net/cadence96/Y4TBN/