CSS에서 페이지 텍스트를 숨기는 여러 가지 방법에 대한 간략한 분석

방법 1: text-indent:-9999px

말할 것도 없지만, 음수 확장 들여쓰기가 가장 일반적으로 사용되는 방법이지만 세 가지 문제가 있습니다. 🎜>1. 특히 저사양 안드로이드 패드에서 100 모니터 너비에 비해 너비가 약 120,000~160,000픽셀인 Sina/Tencent Weibo 제출 버튼의 경우 -9999em과 같은 큰 음수 값은 성능 문제가 있습니다. 애니메이션 효과가 포함되어 있으면 바로 정지됩니다.
2. 실제로 문제는 크지 않습니다. Overflow:hidden은 복구할 수 있습니다.
3. IE6/IE7 의사 인라인 블록 가로 요소에는 적용할 수 없습니다. 그렇지 않으면 요소가 텍스트 들여쓰기로 인해 납치됩니다.
누군가가 주장해도

{ text-indent: 100%; white-spacing: nowrap; overflow: hidden; }

성능 향상 외에도 후자의 두 가지 문제가 여전히 존재합니다.

방법 2: 글꼴 크기:0
이 방법에서는 컨테이너에 높이 또는 행 높이가 설정되지 않은 경우 글꼴 크기:0이 설정된 경우 컨테이너에는 높이가 없습니다.

방법 3: 패딩을 설정하고 컨테이너를 엽니다.

<style type="text/css">   
 .btn{height: 22px;width: 55px;overflow: hidden;}   
 .btn_download{display: inline-block;width:55px;height: 22px;padding-top:22px;background:url(btn_download.gif) no-repeat;text-align:center;}   
</style>   
<p class="btn">   
 <a class="btn_download" href="#" title="下载">下载</a>   
</p>

방법 4: 문자 간격+ 첫 글자
1. 이 방법은 IE6+와 호환되며, 인라인 블록 가로 요소에 적합하고, 버튼 요소에 적합합니다. 단, 다음과 같이 작성해야 합니다.

<button type="button/submit">按钮</button>

이와는 다릅니다:

<input type="button/submit" value="按钮" />

2. 이 방법은 text-align 속성의 영향을 받습니다.

text-align:left;letter-spacing+first-letter의 여백은 음수여야 하고
text-align:right;letter-spacing+first-letter의 여백은 양수여야 합니다.
값의 크기는 실제로 고정되어 있지 않습니다. 일반적으로 문자 간격의 절대값은 2em보다 클 수 있으며, 데모에서는 -20em입니다.
3. 여러 글자를 구분하는 데 쉼표를 사용하지 마세요. -요소.모두 실패할 것 같습니다. 쉼표를 사용하여 구분할 경우에는 쉼표 앞에 공백이 있어야 합니다. 그렇지 않으면 IE6 브라우저는 다음 명령문을 무시합니다:

.btn:first-letter,   
.img:first-letter {   
    margin-left: -20em;   
}   

.btn:first-letter ,    /* 逗号前需有1个空格 */
.img:first-letter {   
    margin-left: -20em;   
}

4. 공개 스타일로 배치하고 별도로

.notext {   
    text-align: left;   
    letter-spacing: -3em;   
    overflow: hidden;   
}   
.notext:first-letter {   
    margin-left: -20em;   
}

호출할 수 있습니다.

위 내용은 CSS에서 페이지 텍스트를 숨기는 여러 가지 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!