CSS plusieurs lignes au-delà des ellipses

Dans la conception Web, il est souvent nécessaire d'afficher du texte sur plusieurs lignes. Cependant, lorsque le contenu du texte est trop long, il dépassera la limite de largeur prédéfinie, ce qui entraînera une mise en page confuse. Afin d'éviter cette situation, nous devons omettre le texte redondant et afficher les ellipses pour augmenter l'esthétique globale et l'expérience utilisateur. En fait, il est très simple d'utiliser des styles CSS pour obtenir cet effet. Ensuite, nous présenterons plusieurs méthodes couramment utilisées.

Méthode 1 : Points de suspension centrés sur une seule ligne

Cette méthode est la plus simple et convient au contenu textuel ne comportant qu'une seule ligne. Nous pouvons y parvenir grâce aux deux lignes de code CSS suivantes :

overflow: hidden; text-overflow: ellipsis;

overflow consiste à masquer le texte qui dépasse la limite de largeur, le débordement de texte est le moyen de l'exprimer au-delà de la limite de largeur, et le les points de suspension sont utilisés ici. Cependant, il existe une limitation avec ces deux lignes de code, qui ne s'applique qu'aux omissions sur une seule ligne. Si le texte comporte plusieurs lignes, nous devons utiliser d’autres méthodes.

Méthode 2 : Aligner les points de suspension aux deux extrémités de plusieurs lignes

Cette méthode autorise plusieurs lignes de texte et des points de suspension apparaissent à la fin du dernier mot de chaque ligne de texte. La clé ici est d'utiliserdisplay: -webkit-box;pour convertir le conteneur de texte en boîte flexible :

.box { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 限制显示的行数 }

Parmi eux, -webkit-line-clamp signifie limiter le nombre maximum de lignes d'affichage de texte. Si vous souhaitez afficher plus de lignes, remplacez simplement le nombre par un nombre plus grand.

L'inconvénient de cette méthode est qu'elle ne peut être utilisée que par les navigateurs prenant en charge le noyau Webkit, une attention particulière doit donc être portée à la compatibilité.

Méthode 3 : Points de suspension multilignes + survol de la souris pour afficher le texte intégral

Cette méthode est similaire au bouton "Lire le texte intégral" Lorsque l'utilisateur survole la souris. pointeur sur le texte, seul le texte intégral sera affiché. Tout d’abord, nous devons limiter le texte à la plage de hauteur du conteneur et le texte en excès est masqué. Ensuite, nous pouvons contrôler l'affichage et le masquage du texte via les événements mouseenter et mouseleave de JavaScript.

Pour la partie CSS, nous pouvons l'implémenter via le code suivant :

.text { display: -webkit-box; -webkit-line-clamp: 3; //限定显示行数 -webkit-box-orient: vertical; overflow: hidden; } .show-text { display: block; cursor: pointer; }

Utilisez js pour implémenter la liaison d'événements et l'affichage et le masquage de texte :

var text = document.querySelector('.text'); var textHeight = window.getComputedStyle(text).height; if(parseInt(textHeight) < text.scrollHeight) { text.classList.add('show-text'); text.addEventListener('mouseenter', function() { text.classList.remove('text'); }); text.addEventListener('mouseleave', function() { text.classList.add('text'); }); }

Vue.filter('multilineEllipsis', function(text, lines) { var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and']; var reg = new RegExp(`(?:(?<=(^|(.{2,}?\W)))[${stopwords.join('')}])?(?(.|\n){1,20}(?=(.|\n){0,20}[\W]$))`, 'g'); var len = 0; var result = ''; var lineCount = 0; while(len <= text.length && lineCount < lines) { var match = reg.exec(text.slice(len)); if(match && match.groups.line) { result += match.groups.line; len += match[0].length; } else { break; } if(len < text.length) { var nextchar = text[len]; if(nextchar !== ' ' && nextchar !== ' ' && nextchar !== '') { result += '...'; break; } } lineCount++; } if(len < text.length) { result += '...'; } return result; });

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!