Wir müssen oft einen Absatz mit erklärendem Text in einer Zeile anzeigen, und aufgrund der Ungewissheit über die Breite der Webseite streckt sich der Text bei willkürlicher Anpassung der Breite oft über die Seite hinaus oder bricht in mehrere Zeilen auf. Mithilfe von CSS können wir die Breite auf eine Zeile beschränken und die zusätzlichen Zeichen ausblenden. Der Einfachheit halber wurde es zur Verwendung in ein kleines Websteuerelement umgewandelt.
Verwenden des Systems;
mit System.Web.UI;
mit System.Web.UI.WebControls;
mit System.ComponentModel;
Namespace cnblogs.birdshome.WebControls
{
/**//// <Zusammenfassung>
/// Zusammenfassende Beschreibung für AutoLabel.
/// </summary>
[DefaultProperty("Text"),
ToolboxData("<{0}:AutoLabel runat=server></{0}:AutoLabel>")]
öffentliche Klasse 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 wird vom Label-Steuerelement geerbt und die Standardbreite beträgt „100 %“. Wenn AutoLabel in einem Containerklassenelement platziert wird, wird die Breite seines Inhalts automatisch an die Containergröße angepasst. Und wenn das „…“-Zeichen auf dem AutoLabel erscheint und die Maus darauf platziert wird, zeigt der ToolTip automatisch den gesamten Inhalt an. Wie unten gezeigt: 