Sans plus tarder, commençons par le code !
1. N'afficher qu'une seule ligne de texte, puis la masquer et l'omettre
// Afficher uniquement une ligne de texte puis omettre .element {
width: 300px; /* Besoin de définir une largeur fixe */
white-space: nowrap; /* Forcer l'affichage d'une seule ligne sans retour à la ligne */
overflow: Hidden; /* Masquer la pièce au-delà de la boîte */
text-overflow: ellipsis; /* Afficher les ellipses en excès */
}2. Affichez le nombre spécifié de lignes de texte, puis masquez-le et omettez-le.
// Omettre après avoir affiché text.element multiligne {
width: 300px; /* Besoin de définir une largeur fixe */
display: -webkit-box; /* Utiliser une disposition de boîte flexible */
-webkit-box-orient : vertical /* disposition verticale */
-webkit-line-clamp: 3; /* Afficher trois lignes */
overflow: Hidden; /* Masquer la pièce au-delà de la boîte */
text-overflow: ellipsis; /* Afficher les ellipses en excès */
} Le texte multiligne est omis en utilisant display: -webkit-box; disposition de boîte flexible et -webkit-line-clamp pour obtenir une troncature de texte multiligne.
Remarque : Cette méthode convient aux principaux navigateurs WebKit (tels que Chrome, Safari, etc.). Pour les autres navigateurs, une prise en charge supplémentaire de polyfill peut être requise.
Autres solutions
1. Utilisez JavaScript pour calculer dynamiquement la hauteur du contenu du texte et le tronquer.
2. Utilisez les bibliothèques existantes : telles que : Clamp.js
Clamp.js : une bibliothèque légère pour la troncature de texte multiligne entre navigateurs.
//Une seule ligne $clamp(myHeader, {clamp: 1});
//Plusieurs lignes $clamp(myHeader, {clamp: 3});
//Calculer automatiquement le nombre de lignes en fonction de la hauteur disponible $clamp(myParagraph, {clamp: 'auto'});
//Calculer automatiquement le nombre de lignes en fonction de la hauteur fixe $clamp(myParagraph, {clamp: '35px'}); 3. CSS Fallback (solution de compatibilité partielle)
Pour certains navigateurs, bien qu'il n'y ait pas de support direct pour -webkit-line-clamp , nous pouvons le combiner avec du CSS simple pour obtenir un effet approximatif.
.élément {
display: block; /* Afficher en tant que bloc */
overflow: Hidden; /* Masquer le contenu excédentaire */
text-overflow: ellipsis; /* Afficher les ellipses en excès */
hauteur de ligne : 1,5em ; /* Définir la hauteur de ligne */
hauteur maximale : 4,5 em ; /* Hauteur maximale de 3 lignes, 3 lignes * 1,5 lignes de hauteur = 4,5 em */
espace blanc : normal ; /* maintient le retour à la ligne normal du texte */
}Bien que ce schéma ne puisse pas réaliser une troncature multiligne précise dans tous les cas, il reste adapté à la prise en charge de l'affichage de base par omission de texte multiligne.
Ceci conclut cet article sur le masquage et l'affichage des points de suspension une fois que le texte CSS dépasse la limite et d'autres solutions de compatibilité du navigateur. Pour plus de texte CSS dépassant le contenu masqué, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. j'espère que vous soutiendrez davantage downcodes.com à l'avenir !