Wie kann ich bestimmte Textzeilen in CSS und JavaScript gezielt anpassen und formatieren?

So zielen Sie auf einzelne Textzeilen ab und stilisieren sie in CSS/JS

Das Auswählen und Gestalten bestimmter Textzeilen scheint mit dem Pseudoelement :first-line von CSS einfach zu sein , aber was ist, wenn Sie auf eine beliebige Zeile im Text abzielen müssen?

Während reines CSS keine Möglichkeit bietet, beliebige Zeilen auszuwählen, kann JavaScript diese ausfüllen Lücke.

Eine JavaScript-Lösung

Ein Ansatz mit JavaScript besteht darin, jedes Wort in ein Span-Element zu packen und eine eindeutige Klasse basierend auf der Position des Spans im Text zuzuweisen. Hier ist der 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
});

Dieser Code zerlegt den Text im Wesentlichen in einzelne Wörter, umschließt sie mit CSS-Klassen in Bereiche und weist Klassennamen basierend auf der Zeilenposition des Bereichs zu, wenn die Größe des Browserfensters geändert wird.

Anwendungen

Um jede gerade Zeile eines Absatzes hervorzuheben, können Sie die ändern Code:

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

Vorbehalte

Es ist wichtig zu beachten, dass Grenzfälle, wie z. B. Änderungen des Klassennamens, die sich auf die Wortgröße oder -breite auswirken, die Genauigkeit des Skripts beeinträchtigen können.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte Textzeilen in CSS und JavaScript gezielt anpassen und formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!