A brief analysis of several ways to hide page text in CSS-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

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

Mar 08, 2017 pm 02:37 PM

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:

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

Copy after login

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

&lt;style type=&quot;text/css&quot;&gt;   
 .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;}   
&lt;/style&gt;   
&lt;p class=&quot;btn&quot;&gt;   
 &lt;a class=&quot;btn_download&quot; href=&quot;#&quot; title=&quot;下载&quot;&gt;下载&lt;/a&gt;   
&lt;/p&gt;

Copy after login

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

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

Copy after login

and not like this :

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

Copy after login

2. This method is affected by the text-align attribute.

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

Copy after login

4. It can be placed in a public style and called separately

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

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn