texte CSS au-delà des points de suspension

Le texte au-delà de la technologie des ellipses en CSS rend les longs paragraphes de texte plus lisibles et embellit également les pages Web. Dans cet article, nous examinerons de plus près quelques formes différentes de points de suspension et comment les définir en fonction de vos besoins.

1. Pourquoi utiliser des ellipses ?

Lorsque le texte dépasse la largeur ou la hauteur de son conteneur dans un site Web ou une application, la technologie de troncature par débordement de texte peut être utilisée pour masquer l'excédent et afficher des points de suspension à la fin du texte. Cette technique rend la page plus propre et évite l'encombrement lorsque le texte déborde.

2. Comment utiliser les ellipses en CSS ?

Pour utiliser les points de suspension de débordement de texte en CSS, vous devez utiliser les trois propriétés suivantes :

1. Propriété text-overflow

La propriété text-overflow définit ce qui se passe lorsque le texte déborde du conteneur. En utilisant cette propriété, vous pouvez créer et définir les types de débordement de texte suivants :

*clip : Tronquer la partie débordante du texte.

*points de suspension : Afficher des points de suspension entre la partie débordante du texte et le bord du conteneur.

2. attribut white-space

L'attribut white-space est utilisé pour définir comment gérer les espaces dans le texte, y compris les espaces, les sauts de ligne, etc. Habituellement, nous utilisons les trois valeurs suivantes :

*normal : pas de saut de ligne forcé, les espaces entre les mots sont automatiquement ajustés.

*nowrap : Ne laissez pas le texte s'enrouler.

*pré-enveloppement : conservez le texte dans un format prédéterminé. S'il y a des espaces dans le texte, divisez-le en lignes en fonction des espaces.

3. propriété overflow

La propriété overflow est utilisée pour définir la manière dont le contenu déborde à l'intérieur de son conteneur. Habituellement, nous utilisons les deux attributs suivants :

*visible : permet au contenu de déborder du conteneur.

*masqué : le contenu ne doit pas déborder du conteneur et la partie excédentaire est recadrée.

3. Plusieurs styles de points de suspension différents

1. Style de points de suspension sur une seule ligne

Lorsque le texte à omettre ne comporte qu'une seule ligne, vous pouvez utiliser le style de points de suspension sur une seule ligne :

.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. Style de points de suspension sur plusieurs lignes

Lorsque le texte à omettre ne comporte qu'une seule ligne Lorsqu'il y a plusieurs lignes, vous pouvez utiliser le style de points de suspension multilignes :

.ellipsis{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. Utilisez les points de suspension lorsqu'ils dépassent un certain nombre de caractères

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

4. Résumé

En utilisant les propriétés text-overflow, white-space et overflow de CSS, nous pouvons transmettre plusieurs styles de points de suspension différents pour créer et définir des types de débordement de texte. Il s'agit notamment des styles de points de suspension sur une seule ligne, des styles de points de suspension sur plusieurs lignes et de l'utilisation des points de suspension lorsqu'un certain nombre de caractères est dépassé. Cette technique peut rendre la page plus ordonnée et éviter une mise en page confuse lorsque le texte déborde.

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!