We often need to display a paragraph of explanatory text on a line, and due to the uncertainty of the width of the Web page, when we adjust its width arbitrarily, the text often stretches out of the page or breaks into multiple lines. By using CSS we can limit the width to one line and make the extra characters hidden. For convenience, it is made into a small Web control for use.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
namespace cnblogs.birdshome.WebControls
{
/**//// <summary>
/// Summary description for AutoLabel.
/// </summary>
[DefaultProperty("Text"),
ToolboxData("<{0}:AutoLabel runat=server></{0}:AutoLabel>")]
public class AutoLabel : System.Web.UI.WebControls.Label
{
protected override void CreateChildControls()
{
base.CreateChildControls();
this.Width = Unit.Percentage(100);
this.Attributes["onmouseover"] =
"if ( this.clientWidth < this.scrollWidth ) this.title = this.innerText; else this.title = '';";
this.Attributes.CssStyle["white-space"] = "nowrap";
this.Attributes.CssStyle["overflow"] = "hidden";
this.Attributes.CssStyle["text-overflow"] = "ellipsis";
}
}
}
AutoLabel is inherited from the Label control, and the default width is "100%". When AutoLabel is placed in a container class element, the width of its content is automatically adjusted by the container size. And when the "..." sign appears on the AutoLabel, and the mouse is placed on it, its ToolTip will automatically display the complete content. As shown below: 