Utiliser CSS pour implémenter la troncature de texte en HTML

Cette fois, je vais vous présenter les précautions pour utiliser CSS pour implémenter la troncature de texte en HTML. Jetons un coup d'œil ci-dessous.

Troncation de texte sur une seule lignedébordement de texte

Le débordement de texte que nous utilisons souvent devrait être un débordement de texte : je pense que tout le monde le connaît. quelques étapes. La troncature de texte sur une seule ligne peut être réalisée avec une seule ligne de code.

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

Le navigateur d'attributs prend en charge nativement et a une bonne compatibilité avec les principaux navigateurs. L'inconvénient est qu'il ne prend en charge que la troncature de texte sur une seule ligne et ne prend pas en charge la troncature de texte sur plusieurs lignes.

Scénarios applicables : la troncature de texte sur une seule ligne est la plus simple à mettre en œuvre et a le meilleur effet, vous pouvez donc l'utiliser en toute confiance.

S'il s'agit d'un effet d'interception de texte multiligne, ce n'est pas si simple à mettre en œuvre.

-webkit-line-clamp implémente

via l'attribut -webkit-line-clamp. La méthode spécifique est la suivante :

div {  display: -webkit-box;  overflow: hidden;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;
}

Elle doit être utilisée conjointement avec display, -webkit-box-orient et overflow :

display: -webkit-box must be; combiné avec les attributs de l'objet Affiché sous la forme d'un modèle de boîte élastique et évolutif.

-webkit-box-orient; doit être combiné avec l'attribut pour définir ou récupérer la disposition des sous-éléments de l'objet flex box

text-overflow: attribut facultatif, peut être utilisé à des fins multiples Dans le cas d'un texte en ligne, utilisez les points de suspension "..." pour masquer le texte au-delà de la plage.

D'un point de vue effet, ses avantages sont :

Troncation responsive, ajustée selon différentes largeurs

Les ellipses ne seront affichées que lorsque le texte dépasse la plage, sinon les points de suspension ne seront pas affichés

Implémentation native du navigateur, donc la position des points de suspension s'affiche parfaitement

Mais l'inconvénient est également très direct, car -webkit-line-clamp est un attribut non standardisé et il n'apparaît pas dans le projet de spécification CSS. En d'autres termes, seuls les navigateurs dotés du noyau Webkit prennent en charge cet attribut. Les navigateurs tels que Firefox et IE ne prennent pas en charge cet attribut et la compatibilité des navigateurs n'est pas bonne.

Scénarios d'utilisation : principalement utilisé pour les pages mobiles, car les navigateurs des appareils mobiles sont davantage basés sur le noyau du webkit. En plus d'une mauvaise compatibilité, l'effet de troncature est bon.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Explication détaillée de l'utilisation de la bibliothèque d'outils js-xlsx xlsxUtils

Intégration des fonctions communes quotidiennes de JS

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!