CSS 텍스트를 숨기는 방법

CSS 텍스트를 숨기는 방법: 1. [text-indent:-9999px;] 방법을 사용합니다. 2. [line-height:0;] 방법을 사용합니다. 3. 범위를 추가합니다. ] 방법 ;5. [overflow:hidden] 방법을 사용하세요.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS 텍스트를 숨기는 방법:

1. text-indent:-9999px;

사용하세요. 하지만 이는 블록 수준 요소에만 적용되며 종종 오프셋을 원합니다. a에 글꼴이 있으므로 문제가 발생합니다. text-indent:-9999px; 사용하기는 더 편하지만 a가 블록으로 변환되면 그 뒤에 있는 요소가 다음 줄로 푸시되는 경우가 많습니다. 이 뒤에는 군중이 나타나도록 플로팅해야 하는 버튼이 있습니다. 2. line-height: 0을 사용하세요.

코드는 다음과 같습니다.

font-size:0;
overflow:hidden;

배경의 글꼴을 완벽하게 "숨길" 수 있습니다

IE6.0, 7.0, 8.0, Firefox 3.010에서 테스트하고 통과

3, 가장 편리한 방법은 범위를 추가한 다음 없음을 표시하는 것입니다. 이런 식으로는 버그가 없습니다.

안타깝게도 태그가 하나 더 있습니다. 루프에서 사용하면 html에 단일 버튼에 대해 이 방법을 사용하는 것이 좋습니다.

입력 값을 숨기는 방법이 조금 어렵습니다

블록과 텍스트 들여쓰기만 사용하여 "오프셋"하여 숨기기를 시뮬레이션할 수 있습니다

display:block;
font-size:0;
line-height:0;
text-indent:-9999px;

ie6.0, 7.0, firefox 3.010에서 테스트하여 통과했습니다

4. display:none:

컨테이너 자체를 포함한 모든 것을 사라지게 할 수 있습니다. 간단하고 효과적이지만 두 가지 익숙한 결함이 있습니다. 즉, 검색 엔진에 친숙하지 않고 스크린 리더에서 무시된다는 것입니다.

5. Overflow:hidden:

이것이 더 합리적이고 제가 가장 좋아하는 방법입니다(Script Home Webmaster의 참고 사항). 구체적인 코드는 다음과 같습니다.

다음은 인용된 내용입니다.

코드는 다음과 같습니다. 다음과 같습니다:

.texthidden{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:0;
height:0;
}

Photo

추천 튜토리얼:

CSS 비디오 튜토리얼

위 내용은 CSS 텍스트를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!