Comment obtenir du texte CSS au-delà des ellipses

Lors de la conception de pages Web, il est souvent nécessaire d'utiliser des ellipses de texte. Lorsque le texte dépasse une certaine longueur, le texte en excès sera automatiquement masqué et représenté par des ellipses. C'est une façon élégante de garder votre page propre et bien rangée. En CSS, cet effet peut être obtenu en utilisant la propriété text-overflow.

La propriété text-overflow vous permet de contrôler le comportement du texte lorsqu'il déborde du conteneur. Il a trois valeurs d'attribut : clip, points de suspension et chaîne. Parmi eux, le plus couramment utilisé est les points de suspension, qui indiquent que le texte dépasse le conteneur avec des points de suspension.

De plus, l'attribut text-overflow doit également être utilisé avec les attributs white-space et overflow. L'attribut white-space indique comment le texte est rendu dans le conteneur, tandis que l'attribut overflow détermine si les barres de défilement doivent apparaître.

Voici comment utiliser l'attribut text-overflow :

.element{
  white-space: nowrap; /*文本不换行*/
  overflow: hidden; /*超出长度隐藏*/
  text-overflow: ellipsis; /*省略号表示*/
}

Il convient de noter que l'attribut text-overflow ne peut être appliqué qu'à une seule ligne de texte. Si vous souhaitez l'appliquer à plusieurs lignes de texte, vous pouvez envisager d'utiliser une mise en page multi-colonnes JavaScript ou CSS3.

De plus, lorsque vous utilisez l'attribut text-overflow, vous devez également prendre en compte le niveau de prise en charge des différents navigateurs. Par exemple, dans IE8 et versions antérieures, cet attribut n'est pas pris en charge, d'autres méthodes doivent donc être utilisées pour obtenir l'effet de points de suspension du texte.

En bref, l'utilisation de l'attribut text-overflow vous permet d'obtenir facilement l'effet de points de suspension sur le texte d'une page Web, rendant la page plus propre et plus ordonnée. Afin d'être compatible avec les différents navigateurs, certaines instructions conditionnelles doivent être ajoutées au code.

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!