Comment JavaScript peut-il styliser avec précision des lignes de texte spécifiques dans un paragraphe, en surmontant les limitations CSS ?

Sélection de lignes de texte spécifiques avec CSS et JS

Styliser des lignes de texte spécifiques peut être difficile, en particulier lorsque des pseudo-éléments CSS tels que : first-line sont limités à la première ligne. Cet article explore une solution JavaScript qui répond à cette limitation.

Un cas d'utilisation de cette solution consiste à mettre en évidence chaque ligne paire d'un paragraphe pour une meilleure lisibilité. Le préformatage du texte en enveloppant chaque ligne dans une étendue avec une classe unique permet un style ciblé. Cependant, déterminer où diviser le texte peut être complexe, en particulier avec des largeurs de paragraphe variables.

JavaScript offre une solution pratique à ce défi. Le code fourni enveloppe chaque mot dans un élément span et attribue une classe en fonction de la position du span lors du redimensionnement de la fenêtre. Le nombre de lignes est incrémenté lorsque la position verticale d'une travée change, et la classe correspondante (« ligne » suivie du numéro de ligne) est attribuée à la travée.

Grâce à cette approche, la discrimination des lignes paires/impaires devient une solution simple. tâche. Pour une efficacité améliorée, le code pourrait être encore optimisé. Cependant, l'implémentation fournie sert de preuve de concept fondamentale.

Les cas extrêmes doivent être pris en compte, par exemple lorsque les styles de classe modifient la taille ou la largeur des mots, car cela pourrait conduire à une division de ligne inexacte.

Une démonstration fonctionnelle de cette solution est disponible sur https://jsbin.com/piwizateni/1/edit?html,css,js,output, présentant la mise en évidence sélective de lignes paires d'un paragraphe.

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!