A brief analysis of several ways to hide page text in CSS

Method 1: text-indent:-9999px

Without further ado, negative value of ext-indent is the most commonly used method, but there are three problems:
1. Large negative values ​​have performance problems, such as -9999em for the Sina/Tencent Weibo submit button, which is about 120,000 to 160,000 pixels wide, relative to 100 monitor widths, on a low-end Android pad, especially when it contains animation effects. , it will be stuck directly;
2. There is a virtual frame under the FireFox browser. In fact, the problem is not big, overflow:hidden can be repaired;
3. It cannot be applied to IE6/IE7 pseudo-inline-block horizontal elements, otherwise the elements will be abducted by text-indent.
Even if someone puts forward:

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

In addition to the performance improvement, the latter two problems still exist.

Method 2: font-size:0
In this method, if the height or row height is not set for the container, if font-size:0 is set, the container will have no height.

Method 3: Set padding and open the container

<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>

##Method 4: letter-spacing+first-letter
1. This method is compatible with IE6+, suitable for inline-block horizontal elements, and suitable for button elements. However, it needs to be written like the following

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

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

text-align:left;letter-spacing+first-letter's margin needs to use negative values,
text-align:right;letter-spacing+first-letter's margin needs to use positive values.
The size of the value is actually not fixed. Generally, the absolute value of letter-spacing can be greater than 2em, and the first character margin can be larger. In the demo, it is -20em.
3. Multiple: Do not use commas to separate the first-letter pseudo-elements. It seems that they will all fail. They should be written separately. When using commas to separate, there must be a space before the comma. Otherwise, the IE6 browser will ignore this statement:

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

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

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

The above is the detailed content of A brief analysis of several ways to hide page text in CSS. For more information, please follow other related articles on the PHP Chinese website!