Question

I have a table datas which may vary time to time. It is to populate the user comments. The comments will be stored in the database and showing in the html table for reference. The user comments may exeed too much sometime, in such times the height and width of my html table also increases to show all the data. but i want to give the fixed height and width for the tags in the table and show only half of the user comments which will be taken from the database..

For example

<table>
<th>id</th>
<th>Comments</th>
<th>User details</th>
<tr>
<td>1</td>

<td>Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus</td>


<td>John smith</td>
</tr>
</table>

In the above table the comments column will get expanded due its exeeded text. i want that to display only one line or two line

How can i do it with css ?

Answer 1

You should add wrapper to do it:

<td>
    <div class="cont">Lorem ipsum dolor sit amet consectetuer adipiscing elit 
        Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit 
        sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla 
        odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus
   </div>
</td>

And CSS:

.cont {
    overflow: hidden;
    width: 300px;  /* or other */
    -o-text-overflow: ellipsis;  /* Opera */
       text-overflow: ellipsis;
    white-space: nowrap;
}