Voici quelques options de titre, conservant le format de la question et reflétant le contenu de l'article : Court et concis : * Comment créer des points de suspension pour un texte multiligne dans un Div de taille fixe ? * Texte ci-dessus-js tutoriel-php.cn

Voici quelques options de titre, conservant le format de la question et reflétant le contenu de l'article : Court et concis : * Comment créer des points de suspension pour un texte multiligne dans un Div de taille fixe ? * Texte ci-dessus

Barbara Streisand

Libérer： 2024-10-27 00:39:03

original

991 Les gens l'ont consulté

Here are a few title options, keeping the question format and reflecting the article's content:

Short & Concise:

* How to Create an Ellipsis for Multi-Line Text in a Fixed-Sized Div?
* Text Overflowing? Ellipsis Solution for Fixed Width and Height Divs

Débordement de texte d'ellipse pour une largeur et une hauteur fixes

Problème :

Création d'ellipses pour un texte multiligne dans un un élément avec une largeur et une hauteur fixes peut être un défi. Malgré l'exploration des plugins jQuery, une solution appropriée reste insaisissable.

Solution :

En utilisant jQuery, vous pouvez obtenir l'effet souhaité en supprimant de manière itérative le dernier mot du texte jusqu'à ce qu'il rentre dans le spécifié hauteur. Voici l'extrait de code :

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 remplace à plusieurs reprises le dernier mot du texte par des points de suspension (...) jusqu'à ce que le texte tienne dans le . Même si JavaScript est désactivé, le texte s'affichera correctement mais sans les points de suspension.
Pour optimiser les performances, envisagez de combiner cette troncature côté client avec la troncature côté serveur pour réduire les frais généraux.
Pour un exemple fonctionnel, consultez cette démo jsFiddle.
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!