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!