Wie kann JavaScript bestimmte Textzeilen wie „:first-line' von CSS formatieren, außer für eine beliebige Zeile?

Auswählen bestimmter Textzeilen mit JavaScript

Wie können wir bestimmte Textzeilen formatieren, ähnlich dem CSS-Pseudoelement :first-line? , ohne es nur auf die erste Zeile zu beschränken?

Während CSS allein für diese Aufgabe nicht ausreicht, bietet JavaScript eine Lösung.

JavaScript-Implementierung:

Wir können jedes Wort mithilfe von JavaScript in ein Span-Element einschließen:

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

Um die Zeilennummer für zu bestimmen In jedem Bereich verwenden wir das Größenänderungsereignis des Fensters, um die vertikale Position jedes einzelnen Bereichs zu berechnen span:

  $(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 

Gerade/ungerade Zeilen hervorheben:

Zum Hervorheben gerader/ungerade Zeilen kann der Code wie folgt vereinfacht werden:

  $(window).resize(function(){ 

    $('span', p).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      var line = Math.floor(top / 20);
      word.attr('class', (line % 2 == 0 ? 'even' : 'odd'));
    });//each
  });//resize 

Überlegungen:

Bei dieser Methode wird davon ausgegangen, dass Wörter nicht umgebrochen werden innerhalb derselben Zeile, und Änderungen in der Klasse können sich auf die Größe oder Breite der Wörter auswirken.

Beispiel:

[Hier klicken](https://jsbin .com/piwizateni/1/edit?html,css,js,output) für eine funktionierende Demonstration.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript bestimmte Textzeilen wie „:first-line' von CSS formatieren, außer für eine beliebige Zeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!