title: How to set ellipses on a column data if it exceeds more than a set record
body: <p>How to set ellipses on a column data</p>
  
  <p>I have the following <code>BoundField</code> in my GridView:</p>
  
  <pre><code>&lt;asp:BoundField DataField="Provider" HeaderText="Provider" ItemStyle-VerticalAlign="Top" ItemStyle-CssClass="hideText" ItemStyle-Width="100" /&gt;
  </code></pre>
  
  <p>It is populated from a sql query and displays like this (the smudged out data is all the provider returned from the result):</p>
  
  <p><img src="https://i.stack.imgur.com/eFKBa.png" alt="enter image description here"></p>
  
  <p>I am populating the data from code-behind (partial code):</p>
  
  <pre><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></pre>
  
  <p>How can I modify the code so for the PROVIDER column only the first 3 records are displayed, followed by <code>...</code> if there are more records returned?</p>
  
  <p>I used the following CSS but it didn't work for me:</p>
  
  <pre><code>.hideText {
      overflow: hidden; 
      text-overflow: ellipsis; 
      white-space: nowrap;        
  }
  </code></pre>
  
  <p>Updated to this:</p>
  
  <pre><code>&lt;asp:TemplateField&gt;
      &lt;HeaderTemplate&gt;
          &lt;asp:Label runat="server" ID="lblProvider" Text="Provider" /&gt;
      &lt;/HeaderTemplate&gt;
      &lt;ItemTemplate&gt;
          &lt;asp:Label runat="server" ID="lblPro" Text='&lt;%#Eval("Provider")%&gt;' ToolTip='&lt;%#Eval("Provider")%&gt;' CssClass="hideText" /&gt;
      &lt;/ItemTemplate&gt;
  &lt;/asp:TemplateField&gt;
  
  .hideText  {
      width:50px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
   }
  </code></pre>
  
  <p>The TD expands out very long and the HTML source shows this:</p>
  
  <p><img src="https://i.stack.imgur.com/0ExRW.png" alt="enter image description here"></p>