CSS au-delà de l'affichage

WBOY

Libérer： 2023-05-27 09:29:36

original

8727 Les gens l'ont consulté

Le suraffichage CSS fait référence à la façon de gérer le contenu débordant lorsque le contenu d'un élément dépasse sa largeur ou sa hauteur spécifiée. Dans ce cas, nous pouvons utiliser certaines propriétés et valeurs fournies par CSS pour contrôler l'affichage et le masquage du contenu au-delà et le rendre plus beau et plus lisible dans la page.

Propriété de débordement CSS

Lorsque le contenu d'un élément dépasse sa largeur ou sa hauteur spécifiée, nous pouvons utiliser la propriété de débordement en CSS pour contrôler la façon dont le contenu débordé est affiché. L'attribut overflow a les valeurs suivantes :

visible : Le contenu excédentaire sera affiché à l'extérieur de l'élément et pourra masquer d'autres éléments.
hidden : Le contenu excédentaire sera recadré et ne sera pas affiché sur la page.
scroll : Si le contenu déborde, une barre de défilement s'affichera afin que l'utilisateur puisse le parcourir.
auto : Si le contenu déborde, une barre de défilement s'affichera, sinon le contenu s'affichera normalement.

Par exemple, si nous voulons afficher du contenu dans un div à hauteur fixe, lorsque le contenu dépasse la hauteur du div, nous pouvons définir l'attribut de débordement sur scroll ou caché.

Du contenu très long

< ;/div>

Dans cet exemple, lorsque le contenu de l'élément p dépasse la hauteur de 200px, une barre de défilement verticale s'affichera afin que l'utilisateur puisse faire défiler pour afficher le contenu.

Propriété CSS text-overflow

En plus d'utiliser la propriété overflow pour contrôler le mode d'affichage du contenu dépassé, nous pouvons également utiliser la propriété text-overflow en CSS pour contrôler le contenu du texte au-delà de la façon dont l'heure est affichée. La propriété text-overflow ne prend effet que lorsque la propriété white-space est définie sur nowrap.

text-overflow a les trois valeurs suivantes :

clip : Lorsque le texte dépasse, il sera rogné et ne sera pas affiché sur la page.
ellipse : Des ellipses seront affichées lorsque le texte est dépassé.
string : La chaîne spécifiée sera affichée au-delà du texte.

Par exemple, si on souhaite afficher un titre long sur une seule ligne, lorsque le texte du titre dépasse la largeur de l'élément, on peut utiliser l'attribut text-overflow et le white- attribut d'espace.

Ceci est un titre long, long, long

# 🎜🎜#

Dans cet exemple, lorsque le texte du titre dépasse la largeur de l'élément, des points de suspension s'afficheront pour informer l'utilisateur que le texte a été tronqué.

Attribut CSS word-wrap

En plus d'utiliser les attributs overflow et text-overflow pour contrôler le débordement et la troncature du contenu de l'élément, nous pouvons également utiliser le word-wrap attribut en CSS pour contrôler l'habillage des mots de texte.

Par défaut, lorsqu'un mot dépasse la largeur de l'élément, il sera tronqué et affiché sur la ligne suivante. Mais si nous voulons nous assurer que les mots ne sont pas tronqués et renvoyés aux limites des mots, nous pouvons utiliser l'attribut word-wrap.

L'attribut word-wrap a les deux valeurs suivantes :

break-word : Le mot sera brisé partout où il est disponible et sera tronqué lorsqu'il est trop long.

Par exemple, si nous voulons afficher du texte long dans une largeur limitée, mais également nous assurer que tous les mots sont renvoyés aux limites et que tout le contenu excédentaire est recadré, vous pouvez utiliser Le CSS suivant :

Ceci est un long, long, long paragraphe texte. Il contient beaucoup de mots, mais ils s'enroulent autour des limites et ne sont pas tronqués.

Conclusion

Lors de la conception de pages Web, nous devons généralement adapter le contenu autant que possible aux différentes tailles et résolutions d'écran. Afin de garantir que le contenu de débordement peut être affiché correctement sur la page, nous pouvons utiliser certaines propriétés et valeurs fournies en CSS, telles que le débordement, le débordement de texte et le retour à la ligne, qui peuvent faciliter la mise en page. et rendre la page beaucoup plus claire et plus soignée.

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!