Comment puis-je cibler et styliser des lignes de texte spécifiques en CSS et JavaScript ?

Comment cibler et styliser des lignes de texte individuelles en CSS/JS

La sélection et le style de lignes de texte spécifiques peuvent sembler simples avec le pseudo-élément :first-line de CSS , mais que se passe-t-il si vous devez cibler n'importe quelle ligne dans le texte ?

Bien que le CSS pur n'offre pas de moyen de sélectionner des lignes arbitraires, JavaScript peut remplir l'écart.

Une solution JavaScript

Une approche utilisant JavaScript consiste à envelopper chaque mot dans un élément span et à attribuer une classe unique en fonction de la position de l'étendue dans le texte. Voici le code :

$(function(){ 
  var p = $('p'); 
  var words = p.text().split(' '); 
  var text = ''; 
  $.each(words, function(i, w){
                   if($.trim(w)) text = text + '<span>' + w + '</span> ' }
        ); //each word 
  p.html(text); 
  $(window).resize(function(){ 

    var line = 0; 
    var prevTop = -15; 
    $('span', p).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      if(top!=prevTop){ 
        prevTop=top; 
        line++; 
      } 
      word.attr('class', 'line' + line); 
    });//each 

  });//resize 

  $(window).resize(); //first one
});

Ce code divise essentiellement le texte en mots individuels, les enveloppe dans des spans avec des classes CSS et attribue des noms de classe en fonction de la position de la ligne lorsque la fenêtre du navigateur est redimensionnée.

Applications

Pour mettre en évidence chaque ligne paire d'un paragraphe, vous pouvez modifier le code :

$('span.even, span.odd').css({
  'background-color' : '#ccc'
});

Mises en garde

Il est important de noter que les cas extrêmes, tels que les changements de nom de classe affectant la taille ou la largeur des mots, peuvent avoir un impact sur la précision du script.

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!