`:first-line` 의사 요소를 넘어 특정 텍스트 줄의 스타일을 어떻게 지정할 수 있나요?

줄 선택 및 스타일링: CSS 및 JS를 사용한 첫 줄 너머

스타일 지정을 위해 특정 텍스트 줄을 선택하는 것은 CSS 의사 요소 :first-line의 제한 사항. CSS만으로는 충분하지 않을 수 있지만 JavaScript는 실행 가능한 솔루션을 제공합니다.

JavaScript 접근 방식

JavaScript를 사용하면 각 단어를 범위 요소로 래핑하고 동적으로 단락에서의 위치에 따른 클래스입니다. 이 접근 방식은 다음과 같습니다.

1. 단락 텍스트를 개별 단어로 분할합니다.
2. 각 단어를 범위 요소로 래핑하고 다시 단락에 추가합니다.
3. 창을 수신합니다. 크기 조정 이벤트.
4. 범위를 반복하여 오프셋을 기준으로 위치(줄 번호)를 결정합니다. top.
5. 라인 클래스를 범위(예: line1, line2)에 할당하여 스타일링을 용이하게 합니다.

이 방법을 사용하면 해당 범위에 클래스를 적용하여 라인 선택 및 스타일링이 가능합니다. 짝수 또는 홀수 행을 모두 강조 표시하는 과정입니다.

구현 세부 정보

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

이 접근 방식은 줄 클래스가 단어의 크기나 너비를 크게 변경하지 않는다고 가정합니다. 줄 번호 매기기의 정확성.

위 내용은 `:first-line` 의사 요소를 넘어 특정 텍스트 줄의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!