Comment puis-je styliser des lignes de texte spécifiques au-delà du pseudo-élément « :first-line » ?

Sélection et style de lignes : au-delà des premières lignes avec CSS et JS

La sélection de lignes de texte spécifiques pour le style est une tâche qui s'étend au-delà du limitations du pseudo-élément CSS :first-line. Bien que CSS seul ne suffise pas, JavaScript offre des solutions viables.

Approche JavaScript

En utilisant JavaScript, il est possible d'envelopper chaque mot dans un élément span et d'attribuer dynamiquement un classe en fonction de sa position dans le paragraphe. Cette approche :

1. Divise le texte du paragraphe en mots individuels.
2. Encapsule chaque mot dans un élément span et l'ajoute au paragraphe.
3. Écoute la fenêtre redimensionner les événements.
4. Parcourt les travées, déterminant leur position (numéro de ligne) en fonction de leur décalage top.
5. Attribue des classes de ligne aux travées (par exemple, ligne1, ligne2) pour faciliter le style.

Cette méthode permet la sélection et le style de ligne en appliquant des classes aux travées correspondantes, simplifiant ainsi le processus de mise en évidence de chaque ligne paire ou impaire.

Mise en œuvre Détails

$(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
});

Edge Cases

Cette approche suppose que les classes de lignes ne modifient pas de manière significative la taille ou la largeur des mots, car cela peut avoir un impact l'exactitude de la numérotation des lignes.

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!