We often need to display a text description on a line. Due to the uncertainty of the width of the web page, we can adjust the width of the text to support the page or fold it into many lines. By using CSS, we can limit the width of a row and hide extra characters. For convenience, it is made into a small web control.
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 ";
}
}
}
The autolabel inherits from the label control. The default width is "100%". When the autolabel is put into the container class element, the width of its content is automatically adjusted by the container size. When the autolabel icon "..." appears, place the cursor over it, and its tooltip automatically displays the complete content. For example:
