CSS 또는 JavaScript를 사용하여 HTML에서 표시되지 않은 텍스트를 숨기려면 어떻게 해야 합니까?

HTML에서 표시되지 않은 텍스트 숨기기

주변 HTML 태그가 없는 텍스트가 포함된 HTML 코드가 있는 상황이 발생할 수 있습니다. 이 텍스트를 숨기는 것은 어려울 수 있으며, 특히 div나 다른 태그로 텍스트를 래핑하는 것이 불가능할 경우 더욱 그렇습니다. CSS와 JavaScript 기술을 사용하여 이 문제를 해결해 보겠습니다.

CSS Hack

한 가지 해결책은 특정 요소의 전체 글꼴 크기를 대상으로 하는 CSS Hack을 사용하는 것입니다.

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

이 코드에서 .entry 요소에는 글꼴 크기 0이 할당되어 요소 안의 모든 텍스트를 효과적으로 숨깁니다. 그러나 이는 .entry 내의 다른 요소가 원래 글꼴 크기를 유지하려는 상황에서는 바람직하지 않을 수 있습니다. 특정 텍스트를 선택적으로 숨기려면 중첩 선택기를 추가할 수 있습니다.

.entry .hidden-text {
  font-size: 0;
}

이 접근 방식은 .hidden-text 클래스가 있는 요소만 대상으로 삼고 숨깁니다.

JavaScript

또는 JavaScript를 사용하여 DOM을 동적으로 조작하고 원하는 결과를 얻을 수 있습니다. 예를 들어 다음 JavaScript 코드를 사용할 수 있습니다.

document.querySelector("div.entry p:nth-child(2)").style.display = "none";

이 코드에서는 .entry div 내에서 두 번째 단락(p:nth-child(2))을 선택하고 표시 속성을 다음으로 설정합니다. "없음"으로 효과적으로 숨길 수 있습니다.

CSS와 JavaScript 중 하나를 선택하는 것은 상황의 특정 요구 사항에 따라 다릅니다. 텍스트를 선택적으로 숨기는 것이 필수적인 경우 CSS가 더 나은 옵션일 수 있습니다. 반면, 특정 조건이나 사용자 상호 작용에 따라 텍스트를 동적으로 숨겨야 하는 경우에는 JavaScript가 더 적합합니다.

위 내용은 CSS 또는 JavaScript를 사용하여 HTML에서 표시되지 않은 텍스트를 숨기려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!