Exemple de partage de code sur l'attribut de débordement de texte et la troncature de texte en CSS

Cet article vous présente principalement les informations pertinentes sur l'attribut text-overflow et la troncature de texte en CSS. L'article fournit un exemple de code détaillé pour votre référence et votre étude. vous être utile. Les développeurs front-end peuvent apporter de l'aide. Les amis qui en ont besoin peuvent suivre l'éditeur pour apprendre ensemble.

Avant-propos

Cet article vous présente principalement le contenu associé à l'attribut de débordement de texte et à la troncature de texte en CSS pour lequel je le partagerai. votre référence. Pour apprendre, jetons un œil à l'introduction détaillée :

débordement de texte et troncature de texte

Les CSS doivent être très familiers. avec text-overflow , et pour la troncature d'une seule ligne de texte, ces trois lignes de code incluant text-overflow: ellipsis peuvent aussi être les plus couramment utilisées par nous.

text-overflow: ellipsis;  
overflow: hidden;  
white-space: nowrap;

Ce petit morceau de CSS est même compatible avec IE6. Après tout, text-overflow: ellipsis était à l'origine exclusif à IE, donc le début de la lutte contre le texte. la troncature était principalement sur Firefox, jusqu'à Firefox7.0, nous avons mis de côté les astuces pour FF et nous sommes concentrés sur l'utilisation de ce code. Bien entendu, la troncature sur plusieurs lignes est toujours hors de question. Dans certaines situations où les exigences de compatibilité entre navigateurs sont élevées, le front-end avait autrefois besoin du back-end pour aider à tronquer le contenu.

Bien qu'il existe d'autres moyens de réaliser une troncature de texte sur plusieurs lignes, il était impossible de tout gérer dans le formulaire du navigateur à l'époque. Par exemple, vous pouvez désormais utiliser le pseudo-élément :after pour positionner la fin de plusieurs lignes et appliquer une transition dégradée pour simuler la troncature.

.clamp{
  height: 3 .6em;
  line-height: 1.2em;
  overflow: hidden;
  position: relative;
}
.clamp:after{
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

L'utilisation de dégradés rend la troncature moins raide, mais je ne l'ai jamais utilisée dans des situations réelles :), car cette méthode présente de nombreux inconvénients. je n’aime jamais utiliser cette méthode laide. À moins que je sois obligé de faire quelque chose d'urgent, je dis toujours aux autres sérieusement : "Je ne peux pas le faire"~

Si c'est juste du webkit, l'approche habituelle est -webkit-line-clamp, pour le webkit actuel La version mobile dominée par celle-ci est une méthode relativement bonne, et l'effet est exactement ce à quoi nous nous attendions :

display: -webkit-box;  
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

Cela fait de nombreuses années (>5 ). L'extrait de code fonctionne toujours bien, mais avec le recul, -webkit-box est l'ancienne syntaxe flex. Bien qu'elle coexiste désormais avec la nouvelle syntaxe flex, elle pourrait disparaître un jour. Mais même ainsi, il n'y a pas de meilleur moyen, il n'y a pas d'attribut qui remplace -webkit-line-clamp, et l'ancienne et la nouvelle syntaxe ne peuvent pas être mélangées, nous devons donc continuer à utiliser le code "classique".

-webkit-line-clamp a un autre petit problème, c'est-à-dire que sa prise en charge du chinois est défectueuse. Par rapport à l'effet parfait en anglais, lors de l'utilisation du chinois, à mesure que la largeur du conteneur change, les trois points tronqués "..." ont tendance à être gênants, et seulement 2 points voire 1 point sont affichés, j'espère que vous pourrez parcourir. la version mise à jour. L'appareil peut résoudre ce petit problème.

Lorsque le texte est tronqué, nous avons toujours l'habitude de l'exprimer avec trois points par défaut. En fait, hormis la méthode de simulation de pseudo-éléments évoquée ci-dessus, nous ne pouvons pas modifier cette représentation. Cependant, si l’on revient sur l’attribut text-overflow, la nouvelle version du standard apportera plus de possibilités.

Le module d'interface utilisateur de base CSS niveau 3 est actuellement en statut CR. Text-overflow n'a que deux valeurs parmi lesquelles choisir : clip ou points de suspension. Cependant, au niveau 4 dans le brouillon, les valeurs d'attribut. sont devenus plus :

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

Nous pouvons spécifier le texte pour remplacer les trois points qui restent inchangés pendant dix mille ans lorsqu'ils sont tronqués, nous pouvons spécifier la transition et contrôler sa distance, et même fournir deux valeurs A pour contrôler le début et la fin de la ligne en même temps... Bien que cela semble inutile, Firefox a en fait d'abord pris en charge la valeur syntaxe dès la version 9.0 ! Je me demande, se pourrait-il qu'après que Firefox ait été critiqué pour son débordement de texte, il ait changé ses habitudes et soit tombé dans le dernier piège...

Cependant, le débordement de texte est toujours le même débordement de texte, toujours un une seule ligne, toujours avec l'ancien espace blanc partenaire : nowrap ;, toujours la saveur familière. Même s'il présente des fonctionnalités plus à la mode, il ne peut toujours pas masquer notre manque de moyens pour tronquer plusieurs lignes.

Résumé

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!