CSS peut-il tronquer de longues chaînes et afficher des points de suspension de manière fiable ?

Le CSS peut-il tronquer les chaînes longues ?

Est-il possible de tronquer du texte en utilisant uniquement HTML et CSS, permettant au contenu dynamique de s'adapter à un format prédéfini conception à largeur et hauteur fixes ?

Historiquement, la troncature du texte était effectuée côté serveur sur la base d'un nombre estimé de caractères. Cependant, cette approche n’était pas fiable en raison de la largeur variable des caractères. Pour résoudre ce problème, une solution basée sur un navigateur a été recherchée, capable de déterminer la largeur réelle rendue du texte.

Initialement, la propriété text-overflow: ellipsis d'IE a été identifiée comme une solution potentielle. Cependant, cette fonctionnalité n'était pas prise en charge par d'autres navigateurs, en particulier Firefox.

Diverses solutions de contournement basées sur CSS ont émergé, utilisant des techniques telles que overflow: Hidden. Cependant, ces méthodes ne parvenaient pas à afficher un indicateur de points de suspension ou l'affichaient même lorsque le texte n'était pas tronqué.

Comme solution potentielle, Justin Maxwell a proposé une technique CSS multi-navigateurs qui implique l'utilisation d'un fichier ellipsis.xml caché. déposer. Cette méthode tronque efficacement le texte à l'aide de points de suspension, mais elle présente l'inconvénient d'empêcher la sélection de texte dans Firefox.

Solution mise à jour

Avec la sortie de Firefox 7 en 2011 , prise en charge du débordement de texte : la propriété points de suspension s'est généralisée, éliminant le besoin de solutions de contournement. Cette propriété permet une troncature précise du texte avec un indicateur de points de suspension.

De plus, une technique a été développée pour mettre à jour le contenu d'un nœud tronqué tout en conservant la prise en charge dans Firefox. Cela implique d'utiliser la fonction replaceEllipsis pour cloner et remplacer le nœud chaque fois que son contenu est modifié.

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!