Comment implémenter Ellipsis pour le débordement de texte multiligne dans un conteneur fixe ?-js tutoriel-php.cn

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

Patricia Arquette

Libérer： 2024-10-26 16:17:03

original

637 Les gens l'ont consulté

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>

Copier après la connexion

<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>

Copier après la connexion

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!

source：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 empêcher un bouton externe de soumettre un formulaire en HTML ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

1687

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

1840

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1565

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...