Comment fonctionnent les points de suspension de débordement de texte dans Firefox et quelles sont les solutions de contournement ?

text-overflow:ellipsis dans Firefox 4 (et FF5) : un guide complet

Dans le monde du développement Web, le texte- La propriété CSS overflow:ellipsis témoigne de la prévoyance de Microsoft. Cette propriété permet au texte de dépasser les limites d'un élément et d'être tronqué avec un indicateur de points de suspension (...).

Malheureusement, Firefox est à la traîne par rapport aux autres navigateurs dans sa prise en charge de text-overflow:ellipsis. Les développeurs de Firefox débattent de la question depuis des années, mais la mise en œuvre reste insaisissable.

La disparition du hack -moz-binding

Il était une fois les utilisateurs de Firefox 3 pourrait recourir à un hack en utilisant la fonctionnalité -moz-binding pour activer la prise en charge des points de suspension. Cependant, cette solution s'est heurtée à un obstacle avec la suppression de -moz-binding dans Firefox 4.

JavaScript en dernier recours

Les développeurs peuvent envisager d'utiliser JavaScript comme solution de repli . jQuery propose une solution simple pour tronquer du texte :

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

Une approche plus élégante

Pour une solution plus soignée, attachez une classe CSS (par exemple, fixWidth) aux éléments avec des largeurs fixes. Ensuite, utilisez JavaScript pour gérer la troncature de tous les éléments avec cette classe :

$(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

Enfin, après des années d'anticipation, Firefox Aurora a intégré la prise en charge des points de suspension. , ouvrant la voie à sa sortie dans Firefox 7. Cette fonctionnalité très attendue place Firefox au niveau des autres navigateurs, offrant aux développeurs une solution native pour troncature des points de suspension.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!