JavaScript와 CSS를 사용하여 특정 텍스트 줄의 스타일을 선택적으로 지정하려면 어떻게 해야 합니까?

CSS와 JavaScript를 사용하여 특정 텍스트 줄 선택 및 스타일 지정

문제:

어떻게 선택적으로 대상을 지정하고 스타일을 지정할 수 있습니까? 문서의 특정 텍스트 줄? :first-line CSS 의사 요소를 사용하면 첫 번째 줄을 타겟팅할 수 있지만 아무 줄이나 선택할 수 있는 방법이 있나요?

JavaScript 솔루션:

CSS 이후 혼자서는 이를 달성할 수 없으므로 JavaScript 솔루션이 필요합니다. 다음 접근 방식을 고려하십시오.

$(function() {
  var p = $('p');
  var words = p.text().split(' '), text = '', line = 0;
  $.each(words, function(i, w) {
    if ($.trim(w)) text += '<span>' + w + '</span> ';
  });
  p.html(text);
  $(window).resize(() => {
    var prevTop = -15;
    $('span', p).each(function() {
      var top = $(this).offset().top;
      if (top !== prevTop) { prevTop = top; line++; }
      $(this).attr('class', 'line' + line);
    });
  });
  $(window).resize();
});

설명:

이 솔루션은 범위 요소의 각 단어를 동적으로 래핑하고 해당 범위에 따라 각 범위에 라인 클래스를 할당합니다. 위치. 창 크기가 조정되면 스크립트는 각 줄이 적절하게 식별되도록 줄 클래스를 조정합니다.

사용 방법:

1. jQuery 라이브러리를 포함합니다.
2. 선택을 위해 ID 또는 클래스가 포함된 단락 요소로 텍스트를 감싸세요.
3. 추가 페이지에 스크립트가 제공됩니다.
4. 창 크기를 조정하여 각 범위 요소에 적용되는 라인 클래스를 확인하세요.

추가 참고 사항:

• 짝수 또는 홀수만 선택하는 등 특정 줄 선택에 대한 논리를 조정합니다.
• 단어 크기나 너비를 변경하는 클래스의 잠재적인 문제를 고려하세요.
• 제공된 JSBin 데모에서 실제 예제를 확인하세요.

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