Question

I have been using Gridview to display data.i set the width of each column using Itemstyle but the Problem is that if the content of that column is bigger than the column width then it will automatically increase column width but i want to break the word if content is bigger than column width…plz help me….

Answer 1

EDIT: Well after investigation it turns out that instead of span if we use div and add ‘word-wrap:break-word’ attribute to style it does the trick. Here is the sample: http://jsfiddle.net/amantur/UYAb7/

PS:- But please note that word-wrap:break-word might not be supported by all browsers and version. If this poses a problem, I suggest you write a function that takes in a href and link text and create a link with first few chacters + … and set complete word as tooltip using title property of anchor element:

public static string CreateLink(string url, string text){
    var linkText=text.Length>10?text.SubString(0,10) + "...":text;
    return string.Format("<a href=\"{0}\" title=\"{1}\">{2}</a>", 
                         url,text,linkText);
}

you can added inner content inside a span element and set its max-width property to the width of the column.

Example:

<Column>
    <ItemStyle Width="100" />
    <span style="max-width:100px;">
       <a href="http://google.com">Google It</a>
    </span>
</Column>