Quelle est la propriété line-clamp du CSS ? Comment utiliser ?

Le contenu de cet article est de vous présenter quel est l'attribut line-clamp du CSS ? Comment utiliser ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d’abord, comprenons ce qu’est l’attribut line-clamp ?

L'attribut line-clamp peut limiter le nombre de lignes de texte affichées dans un élément de bloc Pour obtenir cet effet, il doit être combiné avec d'autres attributs WebKit étrangers et ajouté avec le -. WebKit- préfixe.

L'attribut line-clamp est une propriété WebKit non prise en charge. Il n'apparaît pas dans la spécification CSS draft et il s'agit d'un brouillon en cours de modification. Cela signifie donc que la propriété du serre-ligne n’est pas gravée dans le marbre car il s’agit d’un travail en cours. La définition de l'attribut line-clamp peut être divisée en max-lines et block-overflow, le premier risquant d'être rejeté. [Apprentissage vidéo recommandé : Tutoriel CSS3]

Il est facile de voir comment max-lines est désactivé, car la fonction de line-clamp (définir le nombre de lignes avant troncature) a été mis en œuvre, rendant toute troncature supplémentaire inutile. Cela nous fera dérailler, alors passons à autre chose.

Voyons ensuite comment l'attribut line-clamp est utilisé ?

Syntaxe de base

.module {
  line-clamp: [none | <integer>];
}

line-clamp Les valeurs suivantes sont acceptées dans le projet actuel de la spécification :

aucune : Aucune valeur maximale n'est défini sur le nombre de lignes, donc la troncature ne se produit pas.

 : définit le nombre maximum de lignes avant de tronquer le contenu, puis affiche des points de suspension (...) à la fin de la dernière ligne.

Les points de suspension doivent être rendus sous forme de caractère Unicode (U+2026), mais peuvent être remplacés par un équivalent basé sur la langue du contenu et le mode d'écriture de l'agent utilisateur utilisé.

Alors quelqu'un pourrait demander : ne pouvons-nous pas utiliser l'attribut text-overflow (débordement de texte) pour intercepter du texte ?

text-overflow a une valeur qui va tronquer le texte : points de suspension, regardons l'effet

code css :

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

On peut voir que le débordement de texte peut intercepter du texte, mais il introduit des points de suspension dans la première ligne ; que se passe-t-il si nous voulons intercepter du texte quelque part, comme la troisième ligne de texte ?

C'est là que le line-clamp entre en jeu.

Jetons un coup d'œil à la compatibilité de l'attribut line-clamp

Pour ceux qui ne le peuvent pas Avec les navigateurs pris en charge, nous pouvons utiliser JavaScript pour obtenir cet effet.

Code JavaScript, adresse de téléchargement de Clamp.js : https://github.com/josephschmitt/Clamp.js

Résumé : C'est tout pour ça article Nous espérons que l'ensemble du contenu de l'article sera utile à l'étude de chacun.

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!