Thursday, November 25, 2010

Handling long text using TEXT-OVERFLOW : ECLLIPSIS

Shout it kick it on DotNetKicks.com
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.

2 comments:

  1. Thought I would comment and say neat theme, did you make it for yourself? It's really awesome!

    ReplyDelete
  2. Can you give me any sample of any WCF REST service by which i can insert/retrieve/delete data from my SQL database. WCF is a new concept for me so plz help..

    ReplyDelete