四种利用Div+Css实现隐藏文字内容的方法

外面在网页制作和操作的过程中有很多特殊的要求或者需求，隐藏文字内容就是其中比较常见的。

就隐藏文字内容最起码有2个大的方法,第一种通过JS实现隐藏效果，例如前面361源码给大家介绍的《一段有意思的黑链代码》里的代码实现，还一种比较常见的隐藏文字内容的方法就是通过Div+Css实现隐藏文字内容。下面361就具体给大家介绍

利用Div+Css实现隐藏文字内容主要有以下几种方法：

1、display:none：

这个是最方便方法，指定一个div，然后加上display:none属性，而且这样不会出bug。 经测试 ie6.0 、 7.0 、firefox 3.010 通过。但是遗憾的是，这样会多了个标签，循环中使用的话，html又多了一堆字节，所以单个按钮推荐这样使用。

而针对input value的隐藏这个方式就有些吃力了，所以还是只能用block加text-indent来“偏移”模拟隐藏了，完整代码为：

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

另外要注意的是，它可以使包括容器本身在内的东西都消失，简便且有效，但它有两个耳熟能详的缺陷，那就是对搜索引擎不友好，且被屏幕阅读器所忽略，如果想隐藏文字但是又要被搜索引擎抓取的话不推荐用这个方法。

2、text-indent:-9999px：

text-indent是首行缩进，所以对于多行文本，若单独使用它就有明显的不足，需加上white-space:nowrap;来弥补不足，可是他有一个局限性 他只适用于块级元素block，而我们往往有时候想偏移掉的a上的字体，所以问题就来了：text-indent:-9999px;虽然用起来比较惬意，将a转化成block的话 往往他身后的的元素就被他赶到下一行了，如果正好这个a后面 是一个a按钮，就要用float浮动，这样有些麻烦。

还有一个问题：物理空间仍然存在，故还需设置line-height:0;或使用超小字体(在IE下有点BUG)，最终代码如下:

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

3、line-height:0：

这个方法能完美“隐藏”掉background之上的内容，经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过。

完整代码为：

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

4、overflow:hidden：

这是一个比较合理且是361源码最喜欢的方法，具体代码如下:

display:block;/*统一转化为块级元素*/overflow:hidden;width:300px;height:100px;padding:100px 0 0;background:url();

我们还可以附加：positon:absolute：用绝对定位将其推出可视区，不过虽然可视性不存在，但仍占据物理空间，与隐藏文字的宗旨相背，代码为：

display:block;/*统一转化为块级元素*/overflow:hidden;width:300px;height:100px;}.replacement a{padding:100px 0 0;background:url();

以上四种方法都能实现隐藏文字，但是各有优缺点，我们在实际应用的过程中需要根据实际情况来选择。多多实践