CSS 및 JavaScript에서 특정 텍스트 줄을 대상으로 지정하고 스타일을 지정하려면 어떻게 해야 합니까?

CSS/JS에서 개별 텍스트 줄을 대상으로 지정하고 스타일을 지정하는 방법

CSS의 :first-line 의사 요소를 사용하면 특정 텍스트 줄을 선택하고 스타일을 지정하는 것이 간단해 보일 수 있습니다. , 그러나 텍스트 내의 임의의 행을 대상으로 해야 하는 경우에는 어떻게 해야 합니까?

순수한 CSS는 임의의 행을 선택하는 방법을 제공하지 않지만 JavaScript는 공백을 메울 수 있습니다.

JavaScript 솔루션

JavaScript를 사용하는 한 가지 접근 방식은 각 단어를 범위 요소로 래핑하고 텍스트에서 해당 범위의 위치를 ​​기반으로 고유한 클래스를 할당하는 것입니다. 코드는 다음과 같습니다.

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

이 코드는 기본적으로 텍스트를 개별 단어로 나누고 CSS 클래스를 사용하여 범위로 묶은 다음 브라우저 창 크기가 조정될 때 범위의 줄 위치를 기반으로 클래스 이름을 할당합니다.

응용 프로그램

문단의 짝수 줄을 모두 강조 표시하려면 code:

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

주의 사항

단어 크기나 너비에 영향을 미치는 클래스 이름 변경과 같은 극단적인 경우가 스크립트의 정확성에 영향을 미칠 수 있다는 점에 유의하는 것이 중요합니다.

위 내용은 CSS 및 JavaScript에서 특정 텍스트 줄을 대상으로 지정하고 스타일을 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!