Comment utiliser CSS pour implémenter la fonction d'affichage et de masque des noms de dossiers ou du texte de description?

CSS implémente intelligemment l'affichage du texte du dossier et la cachette

Comment gérer gracieusement l'affichage du texte long dans une liste de dossiers générés dynamiquement pour éviter d'affecter la disposition de la page? Cet article fournit une solution basée sur CSS pour activer les noms de dossiers ou les description du texte entièrement affichés en cas de besoin.

Analyse des exigences

Supposons que nous ayons une liste de dossiers générée dynamiquement avec certains noms de dossiers ou le texte de description trop longs. Par défaut, seul le texte unique s'affiche, mais que devrait-il être fait lorsque l'utilisateur doit afficher le contenu complet?

Solution d'implémentation CSS

Avec les propriétés de la pseudo-claire et des propriétés de texte de CSS :hover nous pouvons facilement implémenter cette fonction. Le code suivant montre l'implémentation spécifique:

<div class="folder-item">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174286777590538.jpg" class="lazy" alt="Icône de dossier">
  <span>Est-ce une beauté? Je ne sais pas, mais je l'ai trouvé de Baidu quand même. Vous pouvez voir si c'est une beauté vous-même.</span>
</div>

.folder-item {
  Largeur: 200px;
}

.folder-item img {
  Affichage: bloc;
  Largeur: 100%; / * Ajustez la largeur de l'image pour s'adapter au conteneur * /
  max-height: 200px; / * Réglez la hauteur maximale de l'image pour éviter une hauteur excessive * /
  FIT d'objet: couverture; / * Gardez les proportions d'image et remplissez le conteneur * /
  marge-fond: 8px;
}

.folder-item Span {
  Affichage: -webkit-box; / * Utilisez flexbox ou webkit-box pour implémenter l'affichage unique * /
  -Webkit-line-lampe: 1; / * Afficher une seule ligne * /
  -Webkit-box-orienment: vertical;
  débordement: caché;
}

.folder-item: Span de la gardienne {
  Affichage: bloc; / * Affichez le texte intégral lors de la volonté * /
  -Webkit-Line-Clamp: Unset; / * Annuler la limite de ligne unique * /
}

Interprétation du code

1. Style de base: .folder-item définit la largeur de l'élément de dossier; Le style d'image est ajusté pour s'adapter à la largeur du conteneur, et l'attribut de hauteur maximale et object-fit est défini pour garantir l'effet d'affichage de l'image.

2. overflow: hidden unique -webkit-line-clamp display: flex; -webkit-box .folder-item span

3. Effet de volant de souris: .folder-item:hover span lors du volant, annulez -webkit-line-clamp pour afficher complètement le texte.

Grâce au code CSS ci-dessus, vous pouvez réaliser la fonction élégante d'affichage et de masque des noms de dossiers ou du texte de description, sans modifier la structure HTML et garder la disposition de la page soignée. Notez que -webkit-line-clamp est une propriété privée. Il est recommandé de l'utiliser conjointement avec display: flex; ou display: -webkit-box; pour assurer la compatibilité.

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!