Comment implémenter des points de suspension avec une largeur et une hauteur fixes dans un texte multiligne ?

Ellipses avec largeur et hauteur fixes dans un texte multiligne

Le débordement de texte multiligne avec points de suspension peut être obtenu dans une largeur fixe et conteneur de hauteur en utilisant JavaScript. Pour comprendre le concept, imaginez un div avec des dimensions prédéfinies qui contient plusieurs lignes de texte.

Le but est de garantir que le texte est tronqué aux lignes spécifiées et ajoute des points de suspension pour indiquer la suite. Voici comment cela peut être implémenté :

1. Propriété de débordement : Définissez la propriété de débordement du div sur "caché" pour empêcher le texte de déborder de ses limites.
2. Hauteur de ligne et hauteur maximale : Spécifiez la hauteur de ligne et la hauteur maximale du div afin de limiter le nombre de lignes qu'il peut accueillir.
3. Troncation du texte : Utiliser jQuery pour supprimer à plusieurs reprises le dernier mot du texte jusqu'à ce qu'il tienne dans la taille souhaitée. Voici un exemple :

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

4. Troncation côté serveur : Combinez la troncature côté serveur pour plus de performances et pour présenter un texte lisible sans points de suspension lorsque JavaScript est désactivé.

Cette approche fournit une solution de base pour le débordement de texte avec des points de suspension dans des limites fixes. Pour une implémentation plus complète, envisagez d'implémenter la troncature côté serveur ou d'utiliser des plugins jQuery qui offrent des fonctionnalités améliorées pour la troncature de texte.

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!