外面在網(wǎng)頁制作和操作的過程中有很多特殊的要求或者需求，隱藏文字內(nèi)容就是其中比較常見的。

就隱藏文字內(nèi)容最起碼有2個(gè)大的方法,第一種通過JS實(shí)現(xiàn)隱藏效果，例如前面361源碼給大家介紹的《一段有意思的黑鏈代碼》里的代碼實(shí)現(xiàn)，還一種比較常見的隱藏文字內(nèi)容的方法就是通過Div+Css實(shí)現(xiàn)隱藏文字內(nèi)容。下面361就具體給大家介紹

利用Div+Css實(shí)現(xiàn)隱藏文字內(nèi)容主要有以下幾種方法：

1、display:none：

這個(gè)是最方便方法，指定一個(gè)div，然后加上display:none屬性，而且這樣不會(huì)出bug。 經(jīng)測(cè)試 ie6.0 、 7.0 、firefox 3.010 通過。但是遺憾的是，這樣會(huì)多了個(gè)標(biāo)簽，循環(huán)中使用的話，html又多了一堆字節(jié)，所以單個(gè)按鈕推薦這樣使用。

而針對(duì)input value的隱藏這個(gè)方式就有些吃力了，所以還是只能用block加text-indent來“偏移”模擬隱藏了，完整代碼為：

display:block;font-size:0;line-height:0;text-indent:-9999px;

另外要注意的是，它可以使包括容器本身在內(nèi)的東西都消失，簡(jiǎn)便且有效，但它有兩個(gè)耳熟能詳?shù)娜毕荩蔷褪菍?duì)搜索引擎不友好，且被屏幕閱讀器所忽略，如果想隱藏文字但是又要被搜索引擎抓取的話不推薦用這個(gè)方法。

2、text-indent:-9999px：

text-indent是首行縮進(jìn)，所以對(duì)于多行文本，若單獨(dú)使用它就有明顯的不足，需加上white-space:nowrap;來彌補(bǔ)不足，可是他有一個(gè)局限性 他只適用于塊級(jí)元素block，而我們往往有時(shí)候想偏移掉的a上的字體，所以問題就來了：text-indent:-9999px;雖然用起來比較愜意，將a轉(zhuǎn)化成block的話 往往他身后的的元素就被他趕到下一行了，如果正好這個(gè)a后面 是一個(gè)a按鈕，就要用float浮動(dòng)，這樣有些麻煩。

還有一個(gè)問題：物理空間仍然存在，故還需設(shè)置line-height:0;或使用超小字體(在IE下有點(diǎn)BUG)，最終代碼如下:

text-indent:-9999px;white-space:nowrap;line-height:0;

3、line-height:0：

這個(gè)方法能完美“隱藏”掉background之上的內(nèi)容，經(jīng)測(cè)試 ie6.0 、 7.0 、8.0、firefox 3.010 通過。

完整代碼為：

line-height:0;font-size:0;overflow:hidden;

4、overflow:hidden：

這是一個(gè)比較合理且是361源碼最喜歡的方法，具體代碼如下:

display:block;/*統(tǒng)一轉(zhuǎn)化為塊級(jí)元素*/overflow:hidden;width:300px;height:100px;padding:100px 0 0;background:url();

我們還可以附加：positon:absolute：用絕對(duì)定位將其推出可視區(qū)，不過雖然可視性不存在，但仍占據(jù)物理空間，與隱藏文字的宗旨相背，代碼為：

display:block;/*統(tǒng)一轉(zhuǎn)化為塊級(jí)元素*/overflow:hidden;width:300px;height:100px;}.replacement a{padding:100px 0 0;background:url();

以上四種方法都能實(shí)現(xiàn)隱藏文字，但是各有優(yōu)缺點(diǎn)，我們?cè)趯?shí)際應(yīng)用的過程中需要根據(jù)實(shí)際情況來選擇。多多實(shí)踐