Comment afficher des points de suspension au-delà de deux lignes en CSS

En CSS, l'attribut text-overflow peut être utilisé pour afficher des points de suspension lorsque le contenu du texte dépasse la zone spécifiée, rendant la page plus belle. Ce qui suit est une introduction détaillée :

1. Propriété text-overflow

La propriété text-overflow en CSS est utilisée pour définir quoi faire lorsque le contenu d'un élément déborde de sa boîte. Il a trois valeurs couramment utilisées :

• clip : coupez le texte pour l'adapter à la largeur de l'élément. Bloque le texte derrière le contenu et n'affiche pas les points de suspension.
• ellipse : affiche des points de suspension (...) pour indiquer le texte coupé.
• string : remplacez le caractère de points de suspension par la chaîne spécifiée.

Dans l'exemple ci-dessous, nous pouvons voir que lorsque le texte déborde du conteneur parent, des points de suspension sont utilisés pour abréger le contenu.

div { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

L'attribut white-space est utilisé pour spécifier comment gérer l'espace vide dans l'élément, et nowrap signifie que le texte ne sera pas renvoyé à la ligne. L'attribut overflow est utilisé pour spécifier comment gérer le débordement du contenu de l'élément, et caché signifie que le contenu débordé est masqué.

2. Combiné avec l'attribut max-height

Lorsqu'il y a trop de texte dans un élément, vous devez limiter le nombre de lignes de texte affichées en définissant la hauteur. Si vous limitez la hauteur puis utilisez le texte-. overflow, vous constaterez peut-être que les points de suspension ne peuvent toujours pas apparaître.

La raison est que le débordement de texte ne fonctionne que sur les éléments de niveau bloc avec une largeur fixe. Par conséquent, nous devons combiner l’attribut max-height pour résoudre ce problème.

Dans l'exemple suivant, nous fixons la hauteur maximale de l'élément à trois lignes. Lorsque le texte dépasse trois lignes, utilisez des points de suspension pour abréger le contenu.

div { width: 150px; max-height: 3em; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

Parmi eux, l'attribut -webkit-line-clamp est utilisé pour spécifier le nombre de lignes de texte, et l'attribut -webkit-box-orient est utilisé pour spécifier la direction du texte. Vertical signifie que le texte est disposé verticalement.

3. Combiné avec JavaScript

Les méthodes ci-dessus sont toutes basées sur l'implémentation du style CSS. Si vous souhaitez afficher dynamiquement le contenu de l'article, vous devez le combiner avec JavaScript.

Déterminez si les points de suspension doivent être affichés en calculant la hauteur réelle de l'élément et la hauteur réelle du contenu. Voici un exemple simple :

var element = document.querySelector('.element'); var contentHeight = element.scrollHeight; var elementHeight = parseInt(getComputedStyle(element).height); if (contentHeight > elementHeight) { element.addEventListener('click', function() { this.classList.toggle('expand'); }); }

Dans cet exemple, nous obtenons d'abord la hauteur du contenu de l'élément et la hauteur réelle de l'élément, si la hauteur du contenu est supérieure à la hauteur de l'élément, puis ajoutons un événement de clic à l'élément et. afficher ou masquer le texte via le contenu des styles CSS.

4. Autres notes

   • La propriété text-overflow ne fonctionne que sur les éléments d'une seule ligne ou les éléments de niveau bloc avec une largeur définie.
   • Lors de l'utilisation de l'attribut text-overflow, l'attribut white-space doit être nowrap.
   • Lorsqu'il est combiné avec l'attribut max-height, l'attribut white-space doit être normal et l'attribut -webkit-line-clamp doit être utilisé pour spécifier le nombre de lignes.
   • Différents navigateurs peuvent avoir une prise en charge différente pour l'attribut text-overflow, veuillez l'utiliser avec prudence.

En général, l'utilisation de l'attribut text-overflow peut rendre la page plus belle et mieux afficher le contenu de l'article. J'espère que cet article vous sera utile.

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!