Wie kann ich lange Zeichenfolgen mit CSS abschneiden und in allen Browsern Auslassungspunkte anzeigen?

Lange Zeichenfolgen mit CSS abschneiden: Eine browserübergreifende Lösung

Dynamischen Text so zu kürzen, dass er in feste Layouts passt, kann eine Herausforderung sein. Keine native CSS-Eigenschaft bietet browserübergreifende Unterstützung für das Abschneiden von Text und die Anzeige von Auslassungspunkten. Mit kreativen Workarounds kann diese Funktionalität jedoch erreicht werden.

Justin Maxwells Ellipsis-Technik

Justin Maxwell hat eine CSS-Lösung entwickelt, die browserübergreifend funktioniert, aber eine Einschränkung aufweist: Sie funktioniert Textauswahl in Firefox nicht zulassen.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Die Datei ellipsis.xml enthält ein XBL-Markup, das das implementiert Auslassungspunkte-Funktionalität.

Knoteninhalt aktualisieren

In Firefox kann das Aktualisieren des Inhalts eines Knotens mithilfe von innerHTML die Auslassungspunkte-Funktionalität beeinträchtigen. Um dieses Problem zu beheben, verwenden Sie den folgenden Code:

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    // Check for the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
}

Hinweis: Textüberlauf: Auslassungspunkte werden jetzt nativ in Firefox 7 unterstützt. Dieses Update ist eine willkommene Verbesserung, aber die Cross- Die Browser-CSS-Lösung bleibt eine nützliche Referenz für ältere Browser.

Das obige ist der detaillierte Inhalt vonWie kann ich lange Zeichenfolgen mit CSS abschneiden und in allen Browsern Auslassungspunkte anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!