Wie funktioniert Text Overflow Ellipse in Firefox und welche Problemumgehungen gibt es?

text-overflow:ellipsis in Firefox 4 (und FF5): Ein umfassender Leitfaden

In der Welt der Webentwicklung ist der Text- Die CSS-Eigenschaft overflow:ellipsis ist ein Beweis für die Weitsicht von Microsoft. Diese Eigenschaft ermöglicht, dass Text über die Grenze eines Elements hinausläuft und mit einem Auslassungszeichen (...)-Indikator abgeschnitten wird.

Leider hinkt Firefox bei der Unterstützung von text-overflow:ellipsis anderen Browsern hinterher. Die Firefox-Entwickler haben das Problem jahrelang debattiert, aber die Umsetzung steht noch aus.

Der Untergang des -moz-binding-Hacks

Es war einmal, Firefox 3-Benutzer könnte auf einen Hack zurückgreifen, der die Funktion -moz-binding verwendet, um die Unterstützung für Auslassungspunkte zu aktivieren. Allerdings stieß diese Lösung mit der Entfernung der -moz-Bindung in Firefox 4 auf ein Hindernis.

JavaScript als letzter Ausweg

Entwickler können die Verwendung von JavaScript als Ausweichlösung in Betracht ziehen . jQuery bietet eine einfache Lösung zum Abschneiden von Text:

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
    var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);
    trimmedText += ellipsis;
    $('#limitedWidthTextBox').val(trimmedText);
}

Ein eleganterer Ansatz

Für eine übersichtlichere Lösung fügen Sie Elementen eine CSS-Klasse (z. B. fixWidth) hinzu mit festen Breiten. Verwenden Sie dann JavaScript, um die Kürzung für alle Elemente mit dieser Klasse zu verarbeiten:

$(document).ready(function() {
    $('.fixWidth').each(function() {
        var limit = 50;
        var ellipsis = "...";
        var text = $(this).val();
        if (text.length > limit) {
            var trimmedText = text.substring(0, limit - 4);
            trimmedText += ellipsis;
            $(this).val(trimmedText);
        }
    });
});

Firefox's Redemption

Endlich, nach Jahren der Vorfreude, hat Firefox Aurora die Unterstützung für Auslassungspunkte integriert , was den Weg für die Veröffentlichung in Firefox 7 ebnet. Diese lang erwartete Funktion bringt Firefox auf Augenhöhe mit anderen Browsern und bietet Entwicklern eine native Lösung für Ellipsenkürzung.

Das obige ist der detaillierte Inhalt vonWie funktioniert Text Overflow Ellipse in Firefox und welche Problemumgehungen gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!