Comment définir CSS3 au-delà de la fonction cachée

CSS3 fait partie intégrante du développement Web moderne. Il fournit aux développeurs une gamme d'outils et de techniques pour améliorer la visibilité, l'interactivité et l'accessibilité des sites Web. L'une d'elles est la fonctionnalité Beyond Hidden, qui est traitée en détail dans cet article.

Qu'y a-t-il au-delà de ce qui se cache ?

Au-delà du masquage est une fonctionnalité très utile en CSS3. Normalement, si le contenu du texte dépasse les dimensions de son conteneur, la partie excédentaire sera automatiquement tronquée. Mais si nous voulons masquer ces contenus excédentaires, nous pouvons alors utiliser la fonction de masquage des excès.

En CSS, vous pouvez réaliser différents types de masquage de débordement en définissant différentes valeurs d'attribut :

1. overflow:hidden : Cet attribut peut être utilisé pour masquer la partie au-delà du conteneur. Il tronque le contenu du texte et masque les excès.
2. text-overflow:ellipsis : cet attribut peut afficher le contenu du texte au-delà du conteneur sous forme de points de suspension.
3. white-space:nowrap : Cet attribut peut forcer l'affichage du contenu du texte sur la même ligne sans retour à la ligne. Lorsque le contenu dépasse la taille du conteneur, il sera masqué.

Comment utiliser Beyond Hide ?

Utiliser la fonctionnalité Beyond Hide est très simple. Voici quelques exemples pour vous aider à comprendre :

Exemple 1 :

Tout d'abord, nous définissons un conteneur div simple, puis nous y ajoutons du contenu textuel :

<div class="container">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>

Ensuite, nous utiliserons overflow:hidden pour masquer le partie du texte qui dépasse le conteneur :

.container {
    width: 200px;
    height: 50px;
    background-color: #ccc;
    overflow: hidden;
}

Dans le code ci-dessus, la largeur du conteneur div est de 200px et la hauteur est de 50px. Le contenu du texte est volumineux et dépasse la largeur et la hauteur du conteneur. Mais grâce à l’utilisation de l’attribut overflow:hidden, le contenu excédentaire sera simplement masqué.

Overhide Exemple 2 :

L'exemple suivant utilisera text-overflow:ellipsis au lieu de text-overflow:clip:

<div class="container">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>

.container {
    width: 200px;
    height: 50px;
    background-color: #ccc;
    white-space: nowrap;
    overflow:hidden;
}

p {
    text-overflow: ellipsis;
}

Dans cet exemple, nous utilisons white-space:nowrap pour empêcher le texte de s'enrouler. Nous utilisons également l'attribut overflow:hidden pour masquer la partie excédentaire, et utilisons text-overflow:ellipsis pour afficher la partie excédentaire sous forme d'ellipses.

Résumé

La fonction Beyond Hidden est une fonction pratique en CSS3. Cela nous aide à masquer le contenu du texte au-delà du conteneur et à rendre la page plus claire et plus lisible. Les exemples ci-dessus ne sont qu'une brève introduction aux capacités cachées de CSS3. Si vous avez besoin de styles et d'effets plus complexes, veuillez apprendre CSS3 en profondeur et maîtriser davantage de conseils et de techniques.

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!