Les ellipsis de débordement de texte peuvent être implémentés via CSS. Utilisez White Space: Nowrap, Overflow: Hidden et Text-Overflow: EllipSis pour une seule ligne; Utilisez l'affichage: -webkit-box, -webkit-box-orienment: vertical et -webkit-line -lamp pour contr?ler le nombre de lignes et coopérer avec le débordement: caché. 1. Une seule ligne doit définir la largeur, sinon elle ne prendra pas effet; 2. Plusieurs lignes doivent spécifier le nombre de lignes et s'appuyer sur la prise en charge du navigateur WebKit; 3. Les problèmes courants incluent la taille du conteneur n'est pas limité, le texte n'est pas débordé, des interférences de mise en page ou des calculs affectant les mots; 4. Faites attention aux situations de bord telles que l'affichage d'erreur du texte court, la troncature de ponctuation et l'impact des polices dynamiques sur le mobile.

Ellipsis à débordement de texte est un moyen intéressant de gérer le texte qui ne correspond pas à son conteneur. Au lieu de laisser le texte s'écouler ou d'envelopper maladroitement, vous pouvez afficher une ellipse ( ... ) pour indiquer qu'il y a plus de contenu. Il est particulièrement utile dans la conception de l'interface utilisateur pour des choses comme les titres, les boutons ou les menus de navigation.

Configuration de base: ellipses à ligne unique

Pour appliquer une simple ellipse sur une seule ligne, vous aurez besoin de quelques propriétés CSS en travaillant ensemble:

• white-space: nowrap - empêche le texte de s'enrouler
• overflow: hidden - cache tout texte qui va au-delà du conteneur
• text-overflow: ellipsis - ajoute le ... où le texte est coupé

 .Ellipsise {
  Espace blanc: Nowrap;
  débordement: caché;
  Text-overflow: ellipsis;
}

Cela fonctionne bien lorsque votre élément a une largeur définie - fixe (comme 200px ) ou relatif (comme 100% ). Sans une largeur définie, le conteneur peut se développer pour s'adapter à tout le texte, et aucune ellipse n'appara?tra.

Ellipsis multi-lignes (la manière pratique)

CSS n'a pas de propriété intégrée pour les ellipsis multi-lignes comme il le fait pour les lignes uniques. Mais vous pouvez l'atteindre en utilisant -webkit-line-clamp , qui limite le nombre de lignes affichées avant de couper avec une ellipse.

Voici comment le faire:

 .Multi-line-ellipsis {
  Affichage: -webkit-box;
  -Webkit-box-orienment: vertical;
  -Webkit-line-lampe: 3;
  débordement: caché;
}

Cette méthode utilise la logique basée sur Flexbox dans les navigateurs WebKit (comme Chrome et Safari), il est donc largement pris en charge ces jours-ci. Gardez simplement à l'esprit:

• Vous devez inclure les deux -webkit-box-orient: vertical et display: -webkit-box
• Cela ne fonctionne que lorsque le parent a une hauteur définie ou lorsque line-clamp est utilisée

Vous pouvez ajuster le numéro dans -webkit-line-clamp pour contr?ler le nombre de lignes affichées avant que l'ellipsis ne monte.

Quand ?a pourrait ne pas fonctionner

Parfois, l'ellipsie n'appara?tra pas même si vous avez écrit le bon CSS. Voici des raisons courantes pour lesquelles:

• ? L'élément n'est pas limité en largeur ou en hauteur
• ? Le texte ne déborde pas (essayez de réduire l'espace ou d'augmenter temporairement la taille de la police)
• ? D'autres styles de mise en page comme flex ou grid interfèrent avec le rendu interne
• ? Utiliser word-break: break-all peut affecter la fa?on dont le débordement est calculé

Si vous rencontrez des problèmes, essayez d'ajouter une couleur de fond ou une bordure au récipient pour mieux voir ses limites.

Quelques étuis à bord à surveiller

Il y a quelques petits détails qui peuvent trébucher:

• Les ellipsis peuvent ne pas appara?tre correctement avec du texte très court - parfois il se manifeste sans avoir besoin de
• Dans certains cas, la ponctuation à la fin de la ligne est coupée avant le mot réel
• Sur les appareils mobiles, le zoom ou le dimensionnement de texte dynamique peut affecter le comportement du débordement

Une astuce consiste à ajouter un peu de rembourrage ou à utiliser box-sizing: border-box afin que le calcul de débordement comprenne les frontières et le rembourrage.

Fondamentalement, c'est tout.

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!