texte CSS caché

Conseils pour masquer du texte CSS : Comment masquer du texte à l'aide de text-indent et clip-path

Dans la conception Web, nous devons parfois masquer du texte, mais nous ne voulons pas utiliser display: none pour le supprimer complètement. À l'heure actuelle, CSS fournit certaines techniques pour obtenir l'effet de masquage du texte, dont les plus couramment utilisées sont l'indentation du texte et le chemin du clip.

1. text-indent

L'attribut text-indent peut déplacer le texte vers la gauche ou la droite. S'il est défini sur une valeur négative, le texte peut être masqué en dehors du bord de l'élément. Par exemple :

.hide {
    text-indent: -9999px;
}

Ce style déplacera le texte à l'intérieur de l'élément en dehors de son côté gauche, obtenant ainsi l'effet caché du texte. Cependant, il convient de noter que cette méthode ne s'applique qu'à une seule ligne de texte et ne peut pas gérer le masquage de plusieurs lignes de texte.

2. clip-path

L'attribut clip-path utilise un chemin de détourage pour découper la partie visible des images et des éléments. Nous pouvons masquer le texte dans un élément depuis l'extérieur du rectangle en définissant le chemin de détourage sur un rectangle. Par exemple :

.hide {
   clip-path: inset(0 0 0 9999px);
}

Ce style recadrera le texte dans l'élément à 9999px à l'extérieur du côté gauche, obtenant ainsi l'effet caché du texte. Par rapport à text-indent, la méthode clip-path peut gérer l'effet de masquage du texte multiligne.

3. Comparaison de l'indentation du texte et du chemin du clip

Nous pouvons comparer l'indentation du texte et le chemin du clip pour mieux comprendre leurs avantages et leurs inconvénients.

1. Obtenir des effets

text-indent : convient aux effets cachés d'une ligne de texte, ne peut pas gérer le texte sur plusieurs lignes.

clip-path : convient pour masquer les effets d'un texte multiligne. Il est plus flexible que l'indentation du texte et peut gérer des formes plus complexes.

2. Difficulté de mise en œuvre

text-indent : très simple, il suffit de définir la valeur négative de text-indent.

clip-path : C'est relativement compliqué. Vous devez prendre en compte la complexité de la forme lors de la définition du chemin de détourage. Cela nécessite plus de pratique et d'expérience pour le maîtriser.

3. Compatibilité

text-indent : La compatibilité est très bonne, prise en charge par presque tous les navigateurs.

clip-path : la compatibilité est relativement mauvaise, certains navigateurs ne la prennent pas en charge et des méthodes de traitement de compatibilité doivent être utilisées pour la résoudre.

Pour résumer, text-indent convient pour masquer une simple ligne de texte, tandis que clip-path est plus flexible et peut gérer des formes plus complexes, mais cela nécessite plus de pratique et d'expérience, ainsi qu'une question de compatibilité.

4. Scénarios d'utilisation

1. Masquer le texte répété dans les éléments

Dans la conception, nous devons parfois masquer une partie du texte dans un élément (comme les titres répétés ou le texte de description), mais nous ne voulons pas l'utiliser. display:none; le supprime complètement. À l’heure actuelle, l’utilisation de text-indent ou clip-path peut répondre à nos besoins.

.title {
    text-indent: -9999px;
}

2. Obtenir un effet de survol

Parfois, nous devons implémenter un effet de survol pour masquer le texte dans un certain élément et l'afficher uniquement lorsque la souris y est déplacée. En utilisant l'indentation du texte et le chemin du clip, nous pouvons facilement obtenir cet effet.

.btn {
    text-indent: -9999px;
}

.btn:hover {
    text-indent: 0;
}

.btn {
    clip-path: inset(0 0 0 9999px);
}

.btn:hover {
    clip-path: unset;
}

3. Masquer le texte de l'étiquette du formulaire

Dans la conception du formulaire, nous devons parfois masquer le texte dans l'étiquette et utiliser uniquement un espace réservé pour inviter l'utilisateur à saisir. À l’heure actuelle, l’utilisation de text-indent ou clip-path peut répondre à nos besoins.

input[type="text"] + label {
    text-indent: -9999px;
}

input[type="text"] + label {
     clip-path: inset(0 0 0 9999px);
}

Résumé

Dans la conception Web, les techniques d'indentation de texte et de chemin de détourage sont très pratiques. Nous pouvons les utiliser pour masquer le texte dans les éléments, implémenter des effets de survol ou masquer le texte dans les étiquettes de formulaire, etc. Ils sont non seulement pratiques à utiliser, mais ont également une bonne compatibilité et constituent un élément indispensable des compétences CSS.

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!