CSS 제한을 극복하면서 JavaScript가 단락의 특정 텍스트 줄 스타일을 정확하게 지정할 수 있는 방법은 무엇입니까?

CSS 및 JS를 사용하여 특정 텍스트 줄 선택

특히 다음과 같은 CSS 의사 요소의 경우 특정 텍스트 줄의 스타일을 지정하는 것이 어려울 수 있습니다. 첫 번째 줄은 첫 번째 줄로 제한됩니다. 이 기사에서는 이러한 제한 사항을 해결하는 JavaScript 솔루션을 살펴봅니다.

이 솔루션의 한 가지 사용 사례는 가독성을 높이기 위해 단락의 모든 짝수 행을 강조 표시하는 것입니다. 고유한 클래스를 사용하여 범위의 각 줄을 래핑하여 텍스트 형식을 미리 지정하면 대상 스타일을 지정할 수 있습니다. 그러나 특히 단락 너비가 가변적인 경우 텍스트를 분할할 위치를 결정하는 것이 복잡할 수 있습니다.

JavaScript는 이러한 문제에 대한 실용적인 솔루션을 제공합니다. 제공된 코드는 범위 요소의 각 단어를 래핑하고 창 크기 조정 중에 범위 위치를 기반으로 클래스를 할당합니다. 스팬의 수직 위치가 변경되면 라인 수가 증가하고 해당 클래스('라인' 다음에 행 번호가 옴)가 스팬에 할당됩니다.

이 접근 방식을 사용하면 짝수/홀수 라인 구별이 간단해집니다. 일. 효율성 향상을 위해 코드를 더욱 최적화할 수 있습니다. 그러나 제공된 구현은 기본적인 개념 증명 역할을 합니다.

클래스 스타일이 단어 크기나 너비를 변경하는 등의 엣지 케이스는 부정확한 줄 분할로 이어질 수 있으므로 고려해야 합니다.

이 솔루션의 작업 데모는 https://jsbin.com/piwizateni/1/edit?html,css,js,output에서 볼 수 있으며 짝수 줄을 선택적으로 강조 표시하는 방법을 보여줍니다. 한 단락.

위 내용은 CSS 제한을 극복하면서 JavaScript가 단락의 특정 텍스트 줄 스타일을 정확하게 지정할 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!