如果列数据超过设置记录，如何在列数据上设置省略号 [英] How to set ellipses on a column data if it exceeds more than a set record

问题描述

如何在列数据上设置省略号

我的 GridView 中有以下 BoundField:

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

它是从一个 sql 查询填充并显示如下(被涂抹的数据是所有从结果返回的提供程序):

我正在从代码隐藏(部分代码)填充数据:

int rowcounter = 0;SPListItemCollection collListItems = list.GetItems(oQuery);foreach(collListItems 中的 SPListItem 项){尝试{行计数器++；字符串解码 = HttpUtility.HtmlDecode(item["Guideline"].ToString());string location = item["Location"].ToString().Replace("#", "
").TrimStart(';');string special = item["Specialty"].ToString().Replace("#", "
").TrimStart(';');string topic = item["Topic"].ToString().Replace("#", "
").TrimStart(';');strTopNum = topic.Split(';')[0];//获取主题索引的编号以将其显示在按钮中//MessageBox.Show(strTopNum);//var btn = (System.Web.UI.WebControls.IButtonControl)string provider = item["Provider"].ToString().Replace("#", "
").TrimStart(';');Results.Rows.Add(item["ID"], location.TrimEnd(';'), special.TrimEnd(';'), topic.Split(';')[1], provider.TrimEnd(';')), item["Summary"].ToString(), item["Guideline"].ToString());//.Split(';')[1] 为主题//Results.Rows.Add(item["ID"], item["Location"].ToString().Replace("#", "
").TrimStart(';').TrimEnd(';'), item["Specialty"].ToString().Replace("#", "
").TrimStart(';').TrimEnd(';'), item["Topic"].ToString().Replace("#", "
"), item["Provider"].ToString().Replace("#", "
"), item["Summary"].ToString(), item["Guideline"].ToString());//strNum[item] = topic.Split(';')[0];Results.DefaultView.Sort = Results.Columns[3].ColumnName + "ASC";结果 = Results.DefaultView.ToTable(true);}捕获(异常前){字符串错误 = ex.Message;}}

如何修改代码，以便 PROVIDER 列只显示前 3 条记录，如果返回更多记录，则后面紧跟 ...?

我使用了以下 CSS，但它对我不起作用:

.hideText {溢出:隐藏；文本溢出:省略号；空白:nowrap；}

更新为:

更新:
这是您完整的 TemplateField 定义.在 TemplateField 中定义一个 div 并使用省略号的 css 属性进行装饰.
 <项目模板><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>

</ItemTemplate></asp:TemplateField>

这是我在本地 gridview 中尝试时的样子.

How to set ellipses on a column data

I have the following BoundField in my GridView:

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

It is populated from a sql query and displays like this (the smudged out data is all the provider returned from the result):

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("#", "
").TrimStart(';');
        string specialty = item["Specialty"].ToString().Replace("#", "
").TrimStart(';');
        string topic = item["Topic"].ToString().Replace("#", "
").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("#", "
").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("#", "
").TrimStart(';').TrimEnd(';'), item["Specialty"].ToString().Replace("#", "
").TrimStart(';').TrimEnd(';'), item["Topic"].ToString().Replace("#", "
"), item["Provider"].ToString().Replace("#", "
"), 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;
    }

}

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?

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

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

Updated to this:

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

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

解决方案

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

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

Here is the working Demo

Update:

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>

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

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