Comment tronquer élégamment le texte dans les balises H2 avec des points de suspension ?

Tronquer le texte dans les balises HTML à l'aide de points de suspension

Dans un monde de conception Web réactive, il est courant de rencontrer des situations où le contenu peut dépasser le contenu disponible largeur d'un élément, ce qui entraîne un retour à la ligne ou une rupture de texte indésirable. Pour les titres (h2) avec des longueurs de texte dynamiques, cela peut présenter un défi esthétique.

Problème :
Comment pouvez-vous tronquer élégamment le contenu d'une balise h2 et ajouter des points de suspension ( ...) lorsque le texte dépasse la largeur disponible de l'écran ou du conteneur ?

Solution :
Heureusement, les navigateurs Web modernes offrent une solution simple et multi-navigateurs utilisant CSS. En ajoutant la classe CSS suivante aux balises h2, vous pouvez obtenir l'effet souhaité :

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

Cette classe CSS applique les paramètres suivants :

• espace blanc : nowrap empêche le texte passe à la ligne suivante.
• overflow : caché masque tout contenu qui dépasse la largeur disponible.
• text-overflow : points de suspension et -o-text-overflow : points de suspension (pour Opera ) afficher des points de suspension (...) à la fin du texte tronqué.

En utilisant cette classe CSS, la balise h2 tronquera gracieusement son contenu et ajoutera des points de suspension lorsqu'elle deviendra trop large pour son récipient. Notez que cette solution est valable pour tous les principaux navigateurs au moment de la rédaction, à l'exception de Firefox 6.0. Pour obtenir de l'aide dans les versions antérieures de Firefox, considérez la solution fournie dans la question liée mentionnée dans la réponse.

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!