>웹 프론트엔드 >CSS 튜토리얼 >CSS만 사용하여 HTML에서 태그가 지정되지 않은 텍스트를 숨기려면 어떻게 해야 합니까?

CSS만 사용하여 HTML에서 태그가 지정되지 않은 텍스트를 숨기려면 어떻게 해야 합니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-25 06:14:16379검색

How Can I Hide Un-tagged Text in HTML Using Only CSS?

HTML에서 HTML 태그 없이 텍스트 숨기기

HTML 문서 내의 특정 텍스트 섹션이 다음으로 둘러싸여 있지 않은 문제가 사용자에게 발생합니다. 모든 HTML 태그. 목표는 이 텍스트를 div나 다른 HTML 요소로 묶지 않고 숨기는 것입니다.

CSS 솔루션

권장되는 접근 방식에는 글꼴 크기를 활용하는 CSS 해킹이 포함됩니다. :

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

주어진 HTML 코드에 이 CSS를 적용하면 다른 텍스트의 가시성을 유지하면서 원하는 텍스트를 효과적으로 숨깁니다. 요소:

<div class="entry">
  <p class="page-header">

".entry" 클래스의 글꼴 크기를 0으로 설정하면 해당 하위 요소가 모두 숨겨집니다. 그런 다음 두 번째 규칙은 선택적으로 글꼴 크기를 초기 값으로 다시 설정하여 ".entry" 컨테이너 내에서 원하는 요소의 가시성을 복원합니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.