Comment utiliser CSS pour obtenir l'effet de dépasser les points de suspension d'affichage

Le dépassement des points de suspension en CSS fait référence à un moyen d'afficher le contenu du texte sous forme d'ellipses via les paramètres de propriété CSS lorsque le texte d'un élément dépasse la largeur ou la hauteur de son conteneur.

Dans des circonstances normales, lorsque le texte déborde, le navigateur déplacera automatiquement le texte vers la ligne suivante pour l'afficher. Mais dans certains cas, notamment en design mobile ou responsive, on souhaite afficher le contenu du texte sur une seule ligne et l'afficher sous forme de points de suspension lorsque le texte dépasse la largeur du conteneur.

L'attribut dépassement omis en CSS peut nous aider à obtenir cet effet. Voici deux attributs de débordement et d'omission couramment utilisés en CSS : text-overflow et white-space.

1. text-overflow

text-overflow est un nouvel attribut de CSS3, qui est utilisé pour définir la façon de gérer lorsque le texte déborde du conteneur. Cet attribut a les valeurs suivantes :

• clip : Le texte est coupé directement après avoir débordé du conteneur.
• ellipse : Le texte s'affiche sous forme de points de suspension après avoir débordé le conteneur.
• string : utilisez la chaîne spécifiée pour remplacer les points de suspension par défaut lorsque le texte déborde du conteneur.

Lorsque vous utilisez text-overflow, vous devez généralement définir overflow:hidden et white-space:nowrap pour limiter le contenu à afficher sur une seule ligne :

div {
    width: 200px;
    height: 30px;
    background-color: #f3f3f3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

2. white-space

white-. Attribut space Utilisé pour définir la manière de gérer les caractères d'espacement dans les éléments (tels que les espaces, les retours chariot, etc.). Cet attribut a les valeurs suivantes :

• normal : Valeur par défaut, lorsqu'il y a plusieurs caractères d'espacement consécutifs dans un élément, un seul espace est affiché.
• nowrap : ne laissez pas le texte s'enrouler, forcez le texte à s'afficher sur la même ligne.
• pre : Conservez les caractères d'espacement et le texte sera affiché de la même manière que le fichier source.
• pré-enveloppement : préservez les espaces et autorisez le retour à la ligne du texte.
• pré-ligne : fusionnez plusieurs caractères d'espacement consécutifs, permettant au texte de s'enrouler.

Lorsque vous utilisez l'attribut white-space pour obtenir une omission de débordement, vous devez définir la valeur de white-space sur nowrap et la valeur de overflow sur Hidden, comme indiqué dans le code suivant :

div {
    width: 200px; 
    height: 30px; 
    background-color: #f3f3f3; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
}

Il convient de noter que l'utilisation de l'attribut white-space affectera l'affichage du texte dans l'ensemble de l'élément, il doit donc être utilisé en conjonction avec l'attribut text-overflow.

Résumé

L'utilisation des propriétés text-overflow et white-space en CSS peut nous aider à réaliser une omission de débordement de texte dans certains cas particuliers. Bien entendu, lorsque vous l'appliquez à des projets réels, veuillez effectuer des ajustements en fonction des conditions réelles.

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!