CSS怎么隱藏頁(yè)面文字

本篇內(nèi)容主要講解“CSS怎么隱藏頁(yè)面文字”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS怎么隱藏頁(yè)面文字”吧!

方式一：text-indent:-9999px
不多說(shuō)，ext-indent負(fù)值為最常用方法，然問(wèn)題有三：
1.較大的負(fù)值有性能問(wèn)題，例如新浪/騰訊微博提交按鈕的-9999em，大概12~16萬(wàn)像素的寬度，相對(duì)于100個(gè)顯示器寬度，在低配Android pad上，尤其含動(dòng)畫(huà)效果的時(shí)候，會(huì)直接卡爆；
2.FireFox瀏覽器下虛框。其實(shí)問(wèn)題不大，overflow:hidden可修復(fù)；
3.不能應(yīng)用在IE6/IE7偽inline-block水平元素上，否則元素會(huì)被text-indent拐走。
即使有人提出：

CSS Code復(fù)制內(nèi)容到剪貼板

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

除了性能有所緩解，后面兩個(gè)問(wèn)題依舊存在。

方式二：font-size:0
此方式在沒(méi)有給容器設(shè)置height 或者行高的情況下，設(shè)置font-size:0,則容器將無(wú)高度

方式三：設(shè)置padding,撐開(kāi)容器

CSS Code復(fù)制內(nèi)容到剪貼板

1. <style type="text/css">   

2.  .btn{height: 22px;width: 55px;overflow: hidden;}   

3.  .btn_download{display: inline-block;width:55px;height: 22px;padding-top:22px;background:url(btn_download.gif) no-repeat;text-align:center;}   

4. </style>   

5. <div class="btn">   

6.  <a class="btn_download" href="#" title="下載">下載</a>   

7. </div>  

方式四：letter-spacing+first-letter
1.此方法兼容IE6+, 適用于inline-block水平元素，且適用于button元素，不過(guò)，需要是下面這種寫(xiě)法

CSS Code復(fù)制內(nèi)容到剪貼板

1. <button type="button/submit">按鈕</button>  

而不能是這樣子：

CSS Code復(fù)制內(nèi)容到剪貼板

1. <input type="button/submit" value="按鈕" />  

2.此方法受text-align屬性影響。
text-align:left;letter-spacing+first-letter的margin使用負(fù)值，
text-align:right;letter-spacing+first-letter的margin需要使用正值。
值的大小其實(shí)沒(méi)有定值。一般，letter-spacing絕對(duì)值大于2em可以，首字符margin可以大一些，demo中是-20em.
3.多個(gè):first-letter偽元素不要使用逗號(hào)分隔，貌似會(huì)全部失效，應(yīng)分開(kāi)寫(xiě)使用逗號(hào)分隔的時(shí)候逗號(hào)前面一定要留一個(gè)空格。否則，IE6瀏覽器會(huì)忽略這條聲明：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .btn:first-letter,   

2. .img:first-letter {   

3.     margin-left: -20em;   

4. }   

5.   

6. .btn:first-letter ,    /* 逗號(hào)前需有1個(gè)空格 */  

7. .img:first-letter {   

8.     margin-left: -20em;   

9. }  

4.可放到公共樣式中，單獨(dú)調(diào)用

CSS Code復(fù)制內(nèi)容到剪貼板

1. .notext {   

2.     text-align: left;   

3.     letter-spacing: -3em;   

4.     overflow: hidden;   

5. }   

6. .notext:first-letter {   

7.     margin-left: -20em;   

8. }  

到此，相信大家對(duì)“CSS怎么隱藏頁(yè)面文字”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！