Comment tronquer le contenu HTML avec Ellipsis pour des mises en page réactives ?

Tronquer le contenu HTML avec des points de suspension pour des mises en page réactives

Dans le monde dynamique de la conception Web, gérer la largeur variable du contenu peut souvent être un défi. Lorsque les titres ou autres éléments de texte dépassent la largeur du conteneur disponible, un retour à la ligne indésirable peut se produire. Pour une présentation plus soignée, il est essentiel de trouver une solution qui tronque élégamment le contenu et affiche des points de suspension (...) si nécessaire.

Troncation basée sur CSS

Heureusement, le CSS moderne offre une solution simple. En appliquant les classes CSS suivantes à la balise appropriée, vous pouvez obtenir une troncature visuellement attrayante avec la prise en charge de la plupart des principaux navigateurs :

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

Ce code CSS force le texte à rester sur une seule ligne (espace blanc). , empêche le débordement en masquant le contenu excédentaire (débordement) et tronque le texte avec des points de suspension (débordement de texte).

Remarque : Firefox 6.0 est une exception et ne prend pas en charge cette technique.

Alternatives jQuery (troncature multiligne)

Si vous avez besoin de la prise en charge du texte multiligne ou des versions antérieures de Firefox, une solution basée sur jQuery peut être nécessaire. Cependant, cette approche n'est généralement pas recommandée car elle ajoute une surcharge inutile à votre site Web.

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!