Comment puis-je créer des points de suspension multilignes en CSS pour les navigateurs Webkit ?

Troncation de texte multiligne avec points de suspension en CSS

La nécessité de condenser un texte long tout en préservant sa lisibilité est un défi courant dans la conception Web . CSS fournit la propriété text-overflow pour tronquer le texte avec des points de suspension, mais cela s'applique généralement aux scénarios sur une seule ligne. Est-il possible d'appliquer des points de suspension sur la deuxième ligne de texte ?

Le dilemme technique

Dans l'exemple fourni, l'effet souhaité est que les points de suspension apparaissent sur le deuxième ligne. Cependant, le comportement par défaut tronque le texte de la première ligne, comme illustré dans le balisage HTML fourni :

<p>I hope someone could help me. I need 
an ellipsis on the second line of...</p>

Une solution pour les navigateurs Webkit

Alors que CSS le fait ne prend pas en charge nativement les points de suspension multilignes, une solution de contournement est disponible pour les navigateurs basés sur Webkit (tels que Safari et Chrome). L'extrait CSS suivant permet d'obtenir l'effet souhaité :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Implémentation

Les propriétés CSS de l'extrait fonctionnent ensemble comme suit :

• overflow : caché empêche le texte de déborder de la zone désignée.
• text-overflow : les points de suspension activent la troncature des points de suspension.
• affichage : -webkit-box et -webkit-line-clamp : 3 limitent le nombre de lignes de texte visibles à trois.
• -webkit-box-orient : vertical organise les lignes de texte verticalement.

Navigateur Compatibilité

Il est important de noter que cette solution ne fonctionne que dans les navigateurs Webkit. D'autres navigateurs peuvent ne pas prendre en charge cette approche. Cependant, il fournit une méthode fiable pour les points de suspension multilignes dans le contexte spécifié.

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!