Comment tronquer de longs titres HTML avec des points de suspension à l'aide de CSS ?

Insérer des points de suspension dans des balises HTML pour un contenu large

La conception Web moderne utilise des mises en page élastiques qui s'adaptent aux différentes tailles de fenêtres du navigateur. Cette flexibilité pose des problèmes pour les éléments de longueur variable, tels que les titres. Dans un scénario où les titres deviennent plus larges que la fenêtre, ils peuvent s'enrouler sur plusieurs lignes, compromettant la mise en page souhaitée.

Pour résoudre ce problème avec élégance, explorons une solution qui exploite CSS pour tronquer les titres sur une seule ligne. et ajoutez des points de suspension (...) si le contenu dépasse la largeur disponible.

Solution basée sur CSS

La solution basée sur CSS suivante est efficace dans les navigateurs modernes , car il exploite la propriété text-overflow :

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

Usage

Pour appliquer cette solution, ajoutez simplement la classe points de suspension aux titres :

<code class="html"><h2 class="ellipsis">This is a potentially long headline</h2></code>

Compatibilité des navigateurs

Cette solution CSS uniquement fonctionne sur tous les principaux navigateurs modernes, à l'exception de Firefox 6.0. Pour Firefox 6.0 ou version antérieure, envisagez de prendre en charge l'encapsulation multiligne comme indiqué dans cette solution alternative.

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!