Bagaimanakah Saya Boleh Menggayakan Garisan Tertentu Teks Melampaui elemen Pseudo `:baris pertama`?

Pemilihan dan Penggayaan Baris: Melangkaui Baris Pertama dengan CSS dan JS

Memilih baris teks tertentu untuk penggayaan ialah tugas yang melangkaui had unsur pseudo CSS :first-line. Walaupun CSS sahaja mungkin tidak mencukupi, JavaScript menawarkan penyelesaian yang berdaya maju.

Pendekatan JavaScript

Menggunakan JavaScript, adalah mungkin untuk membungkus setiap perkataan dalam elemen span dan secara dinamik menetapkan kelas berdasarkan kedudukannya dalam perenggan. Pendekatan ini:

1. Memisahkan teks perenggan kepada perkataan individu.
2. Membungkus setiap perkataan dalam elemen span dan menambahkannya kembali pada perenggan.
3. Mendengar untuk tetingkap ubah saiz acara.
4. Berulang melalui rentang, menentukan kedudukannya (nombor baris) berdasarkan offsetnya atas.
5. Menetapkan kelas baris pada rentang (cth., baris1, baris2) untuk memudahkan penggayaan.

Kaedah ini membolehkan pemilihan dan penggayaan baris dengan menggunakan kelas pada rentang yang sepadan, memudahkan proses menyerlahkan setiap baris genap atau ganjil.

Pelaksanaan Butiran

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

Kes Tepi

Pendekatan ini menganggap bahawa kelas baris tidak mengubah saiz atau lebar perkataan dengan ketara, kerana ia mungkin memberi kesan ketepatan penomboran baris.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Garisan Tertentu Teks Melampaui elemen Pseudo `:baris pertama`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!