Comment puis-je empêcher le débordement de texte dans les balises HTML à l'aide de CSS ?

Ajouter des points de suspension aux balises HTML pour éviter le débordement de texte

Maintenir une mise en page propre dans une page Web dynamique peut être difficile, en particulier lorsque le contenu est variable en longueur. Si les titres (h2) dans une mise en page élastique dépassent la largeur de la fenêtre du navigateur, ils peuvent s'enrouler sur plusieurs lignes, créant une apparence indésirable.

Heureusement, nous avons mis en œuvre une solution élégante pour tronquer les titres et ajouter un indicateur de points de suspension ( ...) est remarquablement simple avec CSS uniquement. Cette solution multi-navigateurs fonctionne de manière transparente sur tous les navigateurs modernes, à l'exception de Firefox 6.0.

En appliquant les styles CSS suivants à la balise de titre, vous pouvez vous assurer que le texte est affiché sur une seule ligne et tronqué avec des points de suspension si nécessaire :

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

La combinaison de ces propriétés force le texte à rester sur une seule ligne sans retour à la ligne, masque tout débordement au-delà de la largeur disponible et ajoute un caractère de points de suspension pour indiquer la troncature.

Pour une prise en charge complète, y compris l'habillage de texte multiligne et la compatibilité avec les anciennes versions de Firefox, envisagez d'implémenter une solution JavaScript.

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!