Comment réparer le débordement de texte entre navigateurs dans des éléments multilignes à largeur fixe à l'aide de jQuery ?

Correction du débordement de texte entre navigateurs dans les éléments multilignes à largeur fixe

Considérez un scénario dans lequel vous avez un div avec un objet contraint largeur et plusieurs lignes de texte. Comment pouvez-vous vous assurer que le texte débordant est tronqué avec des points de suspension (...) ?

Ellipses multilignes avec jQuery

Alors que divers plugins jQuery résolvent le débordement de texte dans certains capacité, en trouver un spécifiquement adapté à vos besoins peut être un défi. Voici une approche de base utilisant jQuery :

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

Ce script supprime de manière itérative le dernier mot du texte jusqu'à ce que la hauteur corresponde au div. Même lorsque JavaScript est désactivé, le texte tronqué reste visuellement correct.

Optimisation côté serveur

La combinaison de cette approche avec la troncature côté serveur peut améliorer les performances en laissant une surcharge minimale .

Remarque : Cette solution est un point de départ et peut nécessiter un affinement supplémentaire en fonction de vos besoins spécifiques.

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!