Recréer l'effet de texte tronqué de MDN

lorem ipsum Dolor sit amet cohétur apising elit.

Idem, rien d'extraordinaire. Notre objectif est de tronquer le contenu après la troisième ligne. Nous pouvons définir le max-height du paragraphe et masquer le contenu de débordement:

 .card p {max-height: calc (4rem * var (- base)); Notez que j'ai un préréglage de variable  - base  qui peut être utilisé comme multiplicateur commun. Je l'utilise pour calculer la taille de la police, la hauteur de la ligne, le remplissage de la carte et maintenant le  max-height  du paragraphe. Je trouve plus facile d'utiliser des valeurs constantes, en particulier lorsque la taille requise est basée sur l'échelle comme celle-ci. J'ai remarqué que MDN utilise également une variable  similaire - Base-Line-Height , probablement dans le même but. 
 
 Comment faire disparaître la troisième ligne de texte? Il s'agit du classique  linéaire-gradient ()  sur la pseudo-élément du paragraphe  :: après , qui est fixé dans le coin inférieur droit de la carte. Par conséquent, nous pouvons le définir comme ceci: 
 
. Variable d'arrière-plan , qui est définie sur la même valeur de couleur d'arrière-plan que la couleur d'arrière-plan utilisée par  .card  lui-même. De cette façon, le texte semble s'estomper en arrière-plan. J'ai trouvé que le deuxième point d'arrêt de couleur du gradient doit être ajusté car le texte n'est pas complètement caché lorsque le gradient est complètement mélangé à 100%. J'ai trouvé que 80% était un bon point pour moi. 
 
 oui,  :: après  nécessite la hauteur et la largeur. La hauteur est l'endroit où la variable  - Base  revient en jeu, car nous voulons qu'elle augmente la hauteur de ligne du paragraphe pour écraser le texte avec la hauteur de  :: après . 
 
 .Card p :: After {/ * supra * / height: calc (1Rem * var (- base) 1px); Encore une fois, je n'utilise pas  top  (ou  inset-block-start ) pour compenser le gradient dans cette direction. ? ‍️ 
 
 maintenant  p :: après  est absolument positionné, et nous devons déclarer explicitement le positionnement relatif sur le paragraphe pour garder  :: après  dans son flux. Sinon,  :: After  sera complètement supprimé du flux de documents et finira par apparaître en dehors de la carte. Ceci est le CSS complet du paragraphe . Non! Le gradient ne semble pas être au bon endroit. </p> <p> J'avoue que j'ai fait une erreur dans ce domaine et j'ai commencé Devtools sur MDN pour voir ce que j'ai manqué. Oh, oui, <code> :: After  doit être affiché sous forme d'élément de bloc. Ceci est très clair lors de l'ajout d'une bordure rouge. ? ‍️ 
 
. 
 
 Oui, la voix off semble respecter le texte intégral. Je n'ai cependant pas testé d'autres lecteurs d'écran. 
 
 J'ai également remarqué que l'implémentation de MDN supprime  Pointer-Events  de  p :: After . Cela peut être une bonne stratégie de défense pour empêcher un comportement étrange lors de la sélection du texte. Je l'ai ajouté, et au moins dans Safari, Firefox et Chrome, la sélection de texte se sent un peu plus fluide. 
">
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!