如何如果超过十余载记录的详细在列数据集省略号 [英] How to set ellipses on a column data if it exceeds more than a set record

问题描述

如何设置椭圆在列数据

我有如下的的BoundField 在我的GridView的：

I have the following BoundField in my GridView:

<asp:BoundField DataField="Provider" HeaderText="Provider" ItemStyle-VerticalAlign="Top" ItemStyle-CssClass="hideText" ItemStyle-Width="100" />

这是从SQL查询并显示如下（脏污出的数据是从结果返回的所有供应商）填充

我从填充code-背后（部分code）的数据：

I am populating the data from code-behind (partial code):

int rowcounter = 0;
SPListItemCollection collListItems = list.GetItems(oQuery);
foreach (SPListItem item in collListItems)
{
    try
    {
        rowcounter++;
        string decoded = HttpUtility.HtmlDecode(item["Guideline"].ToString());
        string location = item["Location"].ToString().Replace("#", "\n").TrimStart(';');
        string specialty = item["Specialty"].ToString().Replace("#", "\n").TrimStart(';');
        string topic = item["Topic"].ToString().Replace("#", "\n").TrimStart(';');
        strTopNum = topic.Split(';')[0]; //gets the number for the topic index to display it in a button
        //MessageBox.Show(strTopNum);
        //var btn = (System.Web.UI.WebControls.IButtonControl)                             
        string provider = item["Provider"].ToString().Replace("#", "\n").TrimStart(';');
        Results.Rows.Add(item["ID"], location.TrimEnd(';'), specialty.TrimEnd(';'), topic.Split(';')[1], provider.TrimEnd(';'), item["Summary"].ToString(), item["Guideline"].ToString());
        //.Split(';')[1] for topic
        //Results.Rows.Add(item["ID"], item["Location"].ToString().Replace("#", "\n").TrimStart(';').TrimEnd(';'), item["Specialty"].ToString().Replace("#", "\n").TrimStart(';').TrimEnd(';'), item["Topic"].ToString().Replace("#", "\n"), item["Provider"].ToString().Replace("#", "\n"), item["Summary"].ToString(), item["Guideline"].ToString());
        //strNum[item] = topic.Split(';')[0];

        Results.DefaultView.Sort = Results.Columns[3].ColumnName + " ASC";
        Results = Results.DefaultView.ToTable(true);


    }
    catch (Exception ex)
    {
        string error = ex.Message;
    }

}

我如何修改code所以对于提供栏只显示前3条记录，然后按 ... 如果有更多的返回记录？

How can I modify the code so for the PROVIDER column only the first 3 records are displayed, followed by ... if there are more records returned?

我用下面的CSS，但它并没有为我工作：

I used the following CSS but it didn't work for me:

.hideText {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;        
}

更新这样的：

<asp:TemplateField>
    <HeaderTemplate>
        <asp:Label runat="server" ID="lblProvider" Text="Provider" />
    </HeaderTemplate>
    <ItemTemplate>
        <asp:Label runat="server" ID="lblPro" Text='<%#Eval("Provider")%>' ToolTip='<%#Eval("Provider")%>' CssClass="hideText" />
    </ItemTemplate>
</asp:TemplateField>

.hideText  {
    width:50px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
 }

而TD扩大了很长，HTML源代码显示了这个：

The TD expands out very long and the HTML source shows this:

推荐答案

文本溢出：省略号; 只有以下属性是真实的作品：

text-overflow:ellipsis; only works if the the following properties are true:

元素的宽度必须指定。
该元素必须具有溢出：隐藏和空格：NOWRAP 设置。更改 CSS 像下面

The element's width must be specified. The element must have overflow:hidden and white-space:nowrap set. Change your css like below

.hideText  {
    width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
 }

下面是工作演示

更新：

下面是完整的模板列定义。定义 DIV 在模板列并与省略号的CSS属性装饰。

Here is your complete TemplateField definition. Define a div within the TemplateField and decorate with the css properties for ellipsis.

 <asp:TemplateField HeaderText="Provider Name">
     <ItemTemplate>
          <div style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
               <asp:Label ID="lblEllipsis" runat="server" Text='<%#Eval("Provider") %>' ToolTip='<%#Eval("Provider") %>'></asp:Label>
          </div>
      </ItemTemplate>
 </asp:TemplateField>

下面是如何看起来就像当我在本地的GridView尝试这样做。

Here is how it looks like when I tried this in a gridview locally.

这篇关于如何如果超过十余载记录的详细在列数据集省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！