Comment créer un débordement de texte multiligne avec des points de suspension dans un div à largeur fixe ?

Débordement de texte multiligne multi-navigateurs avec points de suspension ajoutés dans une largeur et une hauteur fixes

Problème :

Comment pouvons-nous créer des points de suspension sur un <div> avec une largeur fixe et plusieurs lignes, garantissant que le texte débordé est tronqué ?

Solution :

Pour y parvenir, nous pouvons utiliser un extrait de code jQuery pour supprimer à plusieurs reprises le dernier mot du texte jusqu'à ce qu'il rentre dans le texte souhaité height.

Mise en œuvre :

1. Définir le balisage HTML pour le <div> avec une largeur et une hauteur fixes, et un paragraphe (

   ) pour contenir le texte.

2. Ajoutez le CSS pour définir le débordement sur caché, en veillant à ce que la troncature reste invisible.

3. Créez une fonction jQuery pour effectuer la troncature. Cette fonction va :

   • Récupérer le

     et stockez-le dans la variable $p.

   • Calculez la hauteur de l'élément <div> et stockez-le dans la variable divh.
   • Utilisez une boucle while pour supprimer le dernier mot du texte jusqu'à ce qu'il tienne dans la hauteur souhaitée. La boucle utilise la fonction text() pour mettre à jour le contenu du

     avec le texte mis à jour et tronqué.

Considérations supplémentaires :

1. Cette approche implique JavaScript pour la troncature. Pensez à le combiner avec une troncature côté serveur pour améliorer les performances.
2. Ajoutez une largeur : 100 % au champ

   CSS pour s'assurer qu'il occupe toute la largeur du <div>.

Exemple :

HTML

<div>

CSS

#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}

#fos p {
  width: 100%;
  padding: 10px;
  margin: 0;
}

jQuery

var $p = $('#fos p');
var divh = $('#fos').height();

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

Démo : https://jsfiddle.net/w0n5cy2j/

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!