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 have to display this as

Solution

Make use of available 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 First 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

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

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.