CODEWITHSUNDEEP
htmlcss
Bala
Bala

Reputation: 3638

How to restrict the contents in a table data(<td>) of a table to a certain limit?

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 ?

Upvotes: 0

Views: 1862

Answers (4)

Brighty
Brighty

Reputation: 393

A better alternative might be to truncate the comment before it is loaded onto the page on the serverside. You could then append an elipsis to show that it is truncated with a link to the full comment - this would be more user friendly than simply hiding some of the text.

Upvotes: 0

akai
akai

Reputation: 529

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;
}

Upvotes: 1

Sonal Khunt
Sonal Khunt

Reputation: 1894

Write

<td style="width: 300px;">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>

300px can be your choise..

Upvotes: 0

Has QUIT--Anony-Mousse
Has QUIT--Anony-Mousse

Reputation: 77454

Use CSS, to assign overflow: hidden to the contents, along with max-width and max-height. That should do the trick.

Upvotes: 0

Related Questions