텍스트를 표시하지 않도록 CSS를 설정하는 방법

CSS에 텍스트가 표시되지 않도록 설정하는 방법: 1. text-indent 속성을 사용합니다. 2. line-height 속성을 사용합니다. 4. display:none을 통해; 오버플로:숨겨짐 6. positionon 속성을 통해.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS에서 텍스트를 숨기는 6가지 방법

웹 프런트 엔드 개발자로서 HTML 의미를 만들기 위해 페이지를 더 의미있게 만들기 위해 콘텐츠 모듈에 일부 제목을 추가해야 하는 경우가 많습니다. 일반적으로 더 나은 시각적 효과를 전달하기 위해 그림을 사용하여 글꼴을 대체하지 않는 경우가 많습니다. (빈 경우라도)을 사용하여 HTML로 콘텐츠를 직접 제공하므로 CSS에 로드되지 않은 경우 이 블록의 콘텐츠가 무엇인지 알 수 없습니다. 시작하겠습니다. 글꼴을 오프셋하는 일반적인 방법은 다음과 같습니다.

1

하지만 제한이 있습니다. 블록 수준 요소에만 적용되며 종종 글꼴을 오프셋하려고 하므로 문제가 발생합니다. 사용하기가 더 편합니다. a가 블록으로 변환되면 그 뒤에 있는 요소가 종종 다음 줄로 푸시됩니다. 이 a 뒤에 a 버튼이 있으면 부동 소수점을 사용해야 합니다. 뒤에 군중이 있습니다. 조금 귀찮습니다

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

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:

이것이 더 합리적이고 제가 가장 좋아하는 방법입니다(스크립트 하우스 웹마스터의 메모). 구체적인 코드는 다음과 같습니다.

다음은 인용 내용입니다.

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

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

6. positon:absolute:

절대 위치 지정을 사용하여 가시 영역 밖으로 밀어냅니다. 그러나 가시성은 존재하지 않지만 여전히 물리적 공간을 차지하므로 텍스트를 숨기는 목적에 어긋납니다.

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

코드는 다음과 같습니다.

.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

참고: 다음 세 가지 방법으로도 숨겨진 텍스트 효과를 얻을 수 있지만 권장되지 않습니다.

【추천 학습:

css 동영상 튜토리얼

】

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