Handling long text using TEXT-OVERFLOW : ECLLIPSIS

Problem :
1. I got requirement from the client that if the text is longer than text get truncated and display "..." at the end of the string.
2. But the twist is I have to display "..." in ASP.NET GridView control for each cell.

Example :

I am working on my blog post formatting this day.

I have to display this as

I am working on my blog post formatting this day.

Solution:

Make use of avaialbe CSS property
text-overflow: ellipsis;
which truncate text form the point where text is wraping and display "..." as we require to resolve our issue.

Solution for the fist problem :
So out css class for DIV element to get "..." will be like :

div
{
   border-bottom: 1px solid; 
   border-left: 1px solid; 
   border-right: 1px solid; 
   border-top: 1px solid;        
   overflow: hidden; 
   text-overflow: ellipsis; 
   width: 150px;
   white-space:nowrap;
}

Output:

I am working on my blog post formatting this day.

This property is that its works for div, p type element. i.e for the block element. So it resolves my first problem.

Solution for the problem 2
But the CSS text-overflow not working for the html table element directly. And GridView control get converted in table structure when its render on client browser.

So to resolve this issue we have to use another CSS property call
table-layout : fixed;
more about table-layout : http://www.w3schools.com/Css/pr_tab_table-layout.asp

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

table td
{
overflow: hidden; 
text-overflow: ellipsis;
white-space:nowrap;
}

Output:

My WebSite :	http://pranayamr.blogspot.com/
My WebSite2 :	http://ww.stackoverflow.com/

Support
text-overflow : ecllipsis is supported by IE6+, Google Chrome 

Summary
So text-overflow:eclipse reduce the cost of calculating no. char we can display in a given width and write some custom login to display "..." append with the string.