且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在gridview中设置修复列的宽度,并且如果内容比列的宽度大,则不要打破单词

更新时间:2023-10-05 09:44:34

编辑:事实证明,如果我们使用 div 并将'word-wrap:break-word'属性添加到样式中,而不是 span 它的伎俩。以下是示例: http://jsfiddle.net/amantur/UYAb7/



PS: - 但是请注意,所有浏览器和版本都不支持 word-wrap:break-word 。如果出现这个问题,我建议你编写一个函数,它接受一个 href 并链接文本并创建一个与前几个字符的链接+ ...并将完整的单词设置为tooltip使用 title anchor 元素的属性:

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


您可以将内部内容添加到 span 元素并将它的 max-width 属性设置为列宽。



示例:

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

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....

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>