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

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

문제:

다음을 포함하는 HTML 코드가 있습니다. 주변 HTML 태그가 없는 텍스트입니다. 특히 "p" 태그 바로 뒤에 있는 "Enter" 텍스트를 숨기려고 합니다. 그러나 HTML 요소로 텍스트를 래핑하는 것은 불가능합니다.

해결책: CSS 글꼴 크기 트릭

목표를 달성하려면 CSS 해킹을 사용할 수 있습니다. 글꼴 크기 속성 활용:

1. 클래스를 만듭니다. ".entry"를 입력하고 글꼴 크기 0을 할당합니다.

.entry {
  font-size: 0;
}

2. 이 클래스 내에서 와일드카드 선택기("*")를 추가하여 글꼴 크기를 원래 크기로 다시 설정합니다. 초기 값:

.entry * {
  font-size: initial;
}

기본적으로 모든 요소는 상위 요소의 글꼴 크기를 상속합니다. 그러나 ".entry" 클래스의 글꼴 크기를 0으로 설정하면 모든 하위 요소를 효과적으로 숨길 수 있습니다. 그러면 와일드카드 선택기가 중첩된 요소에 대해 이 설정을 재정의하여 해당 요소의 텍스트가 표시되도록 합니다.

예:

코드에서 ".entry" 클래스를 적용합니다. 상위 div에 추가하고 "Enter" 텍스트가 이 클래스에 속하는지 확인하세요.

<div>

이 CSS 트릭을 사용하면 "Enter" 텍스트는 숨겨지고 ".entry" 클래스 내의 나머지 콘텐츠는 계속 표시됩니다.

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