Trim text with ellipsis on a Label
The Label class Represents a label control, which displays text on a Web
page. The asp.net developers can use the Label control to display text in a
set location on the web page. Unlike static text, asp.net c# developers can
customize the displayed text through the Text property.
The following asp.net c# tutorial code demonstrates how we can trim a text with an ellipsis and display it on a Label web server control. To show an ellipsis on a Label control, the asp.net c# developers have to apply a custom CSS style to a Label control.
The Label CssClass property gets or sets the Cascading Style Sheet (CSS) class rendered by the Web server control on the client. The CssClass property is inherited from WebControl. The CssClass property value is a String which is the CSS class rendered by the Label server control on the client. The default value of this property is Empty.
So finally, using this CssClass property the asp.net c# developers can make a Label control’s long text trimmed and display an ellipsis at the end of the text. The asp.net developers just have to set the CSS text-overflow style value to ellipsis. Here we also applied the display CSS style value to block, the white-space value to nowrap, and the overflow value to hidden.
The following asp.net c# tutorial code demonstrates how we can trim a text with an ellipsis and display it on a Label web server control. To show an ellipsis on a Label control, the asp.net c# developers have to apply a custom CSS style to a Label control.
The Label CssClass property gets or sets the Cascading Style Sheet (CSS) class rendered by the Web server control on the client. The CssClass property is inherited from WebControl. The CssClass property value is a String which is the CSS class rendered by the Label server control on the client. The default value of this property is Empty.
So finally, using this CssClass property the asp.net c# developers can make a Label control’s long text trimmed and display an ellipsis at the end of the text. The asp.net developers just have to set the CSS text-overflow style value to ellipsis. Here we also applied the display CSS style value to block, the white-space value to nowrap, and the overflow value to hidden.
label-ellipsis.aspx
<%@ Page Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<script runat="server">
protected void Button1_Click(object sender, System.EventArgs e)
{
Label1.CssClass = "LabelEllipsisStyle";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.LabelEllipsisStyle {
text-overflow:ellipsis;
white-space:nowrap;
display:block;
overflow:hidden;
}
</style>
<title>asp.net example - label ellipsis</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:MidnightBlue; font-style:italic;">
asp.net example - label ellipsis
</h2>
<hr width="550" align="left" color="Gainsboro" />
<asp:Label
ID="Label1"
runat="server"
Text="sample label to test label ellipsis."
BorderColor="Red"
BorderWidth="1"
Font-Size="X-Large"
Width="250"
ToolTip="sample label to test label ellipsis."
>
</asp:Label>
<br /><br /><br />
<asp:Button
ID="Button1"
runat="server"
Text="label ellipsis"
OnClick="Button1_Click"
Height="40"
Font-Bold="true"
/>
</div>
</form>
</body>
</html>
