Wie schneidet man Text in H2-Tags elegant mit Auslassungspunkten ab?

Text in HTML-Tags mithilfe von Auslassungspunkten abschneiden

In einer Welt des responsiven Webdesigns kommt es häufig vor, dass der Inhalt den verfügbaren Inhalt übersteigt Die Breite eines Elements kann zu einem unerwünschten Textumbruch oder -bruch führen. Bei Überschriften (h2) mit dynamischen Textlängen kann dies eine ästhetische Herausforderung darstellen.

Problem:
Wie können Sie den Inhalt innerhalb eines h2-Tags elegant abschneiden und Auslassungspunkte hinzufügen ( ...) wenn der Text die verfügbare Breite des Bildschirms oder Containers überschreitet?

Lösung:
Glücklicherweise bieten moderne Webbrowser eine einfache und browserübergreifende Lösung mithilfe von CSS. Durch Hinzufügen der folgenden CSS-Klasse zu den h2-Tags können Sie den gewünschten Effekt erzielen:

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

Diese CSS-Klasse wendet die folgenden Einstellungen an:

• white-space:nowrap verhindert Der Text wird nicht in eine neue Zeile umgebrochen.
• overflow: versteckt verbirgt alle Inhalte, die die verfügbare Breite überschreiten.
• text-overflow: ellipsis und -o-text-overflow: ellipsis (für Opera ) zeigen am Ende des abgeschnittenen Texts ein Auslassungszeichen (...) an.

Mit dieser CSS-Klasse kürzt das h2-Tag seinen Inhalt elegant und fügt ein Auslassungszeichen hinzu, wenn es zu breit wird Container. Beachten Sie, dass diese Lösung zum Zeitpunkt des Schreibens für alle gängigen Browser gültig ist, mit Ausnahme von Firefox 6.0. Für Unterstützung in früheren Versionen von Firefox ziehen Sie die Lösung in Betracht, die in der in der Antwort erwähnten verlinkten Frage bereitgestellt wird.

Das obige ist der detaillierte Inhalt vonWie schneidet man Text in H2-Tags elegant mit Auslassungspunkten ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!