Comment puis-je tronquer des en-têtes HTML trop longs avec des points de suspension ?

Solution élégante pour tronquer les en-têtes HTML trop larges

Dans une page Web dynamique avec une mise en page réglable, il est courant de rencontrer des titres (h2) de longueurs variables. Lorsque ces titres dépassent la largeur de la fenêtre du navigateur, ils sont généralement divisés en plusieurs lignes. Pour éviter ce comportement indésirable, explorons une solution sophistiquée pour tronquer le texte du titre et insérer des points de suspension (...) s'il déborde sur plusieurs lignes.

En utilisant la puissance du CSS, nous pouvons concevoir une croix -solution de navigateur qui réalise cette troncature sans effort. Voici le code :

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

Ce code définit une classe CSS nommée "ellipsis" avec des propriétés spécifiques :

• white-space: nowrap; : Empêche le texte ne s'enroule pas sur plusieurs lignes.
• overflow: Hidden; : masque tout texte qui dépasse la largeur de l'élément.
• text-overflow: points de suspension; et -o-text-overflow: ellipsis; : insère des points de suspension (...) à la fin du texte tronqué pour la plupart des navigateurs modernes et Opera, respectivement.

En appliquant cette classe CSS à vos éléments h2 problématiques, vous pouvez vous assurer qu'ils seront tronqués sur une seule ligne et afficheront des points de suspension si le texte déborde. Cette solution est à la fois élégante et compatible avec tous les principaux navigateurs sauf Firefox 6.0. Pour les versions antérieures de Firefox, vous pouvez vous référer à d'autres ressources qui traitent du retour à la ligne du texte multiligne.

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!