recherche

Maison >interface Web >js tutoriel >Comment implémenter Ellipsis pour le débordement de texte multiligne dans un conteneur fixe ?

Comment implémenter Ellipsis pour le débordement de texte multiligne dans un conteneur fixe ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-26 16:17:03755parcourir

How to Implement Ellipsis for Multi-line Text Overflow within a Fixed Container?

Gestion des points de suspension pour le débordement multiligne dans un conteneur fixe

Dans le développement Web, il est souvent nécessaire d'afficher du texte multiligne dans un conteneur de largeur et de hauteur spécifiées . Cependant, lorsque le texte dépasse l’espace disponible, cela peut créer un débordement inesthétique. Pour résoudre ce problème, les développeurs recherchent souvent des méthodes pour implémenter des points de suspension, indiquant qu'il y a plus de texte masqué.

Un de ces scénarios est celui où le texte est contenu dans un

élément avec une largeur et une hauteur fixes. Bien qu'il existe différents plugins jQuery, trouver la solution parfaite peut s'avérer difficile. Cet article explore une approche basique mais efficace pour obtenir le résultat souhaité.

L'utilisation de jQuery offre un moyen pratique de manipuler le contenu textuel du fichier

élément. Notre objectif est de supprimer de manière itérative le dernier mot jusqu'à ce que la hauteur du texte corresponde à la hauteur spécifiée du conteneur. Ceci est accompli en utilisant la fonction externalHeight() pour vérifier si la hauteur du texte dépasse la hauteur du conteneur et, si c'est vrai, en utilisant la fonction text() pour tronquer le dernier mot du texte.

Pour garantir que le le débordement reste invisible, on utilise le débordement : caché ; Propriété CSS sur le

élément. De cette façon, même si JavaScript est désactivé, le résultat apparaît visuellement correct sans les points de suspension.

Voici le code CSS et jQuery de cette solution :

<code class="css">#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }</code>
<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>

Cette approche offre une solution simple et efficace au problème du débordement de texte multiligne avec gestion des points de suspension dans un conteneur de largeur et de hauteur fixes. En combinant jQuery avec CSS, vous pouvez obtenir l'effet visuel souhaité tout en conservant l'accessibilité même lorsque JavaScript est désactivé.

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!

JavaScript jquery css if for while using Property function this display overflow word
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment récupérer et analyser des données texte à partir d'un tableau d'URL avec Promise.all ?Article suivant：Comment récupérer et analyser des données texte à partir d'un tableau d'URL avec Promise.all ?

Articles Liés

Voir plus