常见的CSS隐藏文字方法

对于隐藏文字 & 内容，网上已有不少CSS方法可以实现，现总结几条实用的隐藏效果如下：

假如需要隐藏的对象是：

<h1 ><span >this text need to be hidden.</span></h1>

隐藏这一部分的css方法一般有六种：

1、display:none;

/* 它可以使包括容器本身在内的东西都消失，简便且有效，但它有两个耳熟能详的缺陷，那就是对搜索引擎不友好，且被屏幕阅读器所忽略。将对象完全性隐藏。 */

e.g: #header { display:none; width:300px; height:40px; line-height:40px;}

2、visibility: hidden;

/* 隐藏了对象内容，却保留了它的物理空间来占位。 */

e.g: #header { visibility:hidden; width:300px; height:40px; line-height:40px;}

3、text-indent:-10000px;

/* text-indent是首行缩进，所以对于多行文本，若单独使用它就有明显的不足，需加上white-space:nowrap;来弥补不足，但还有一个问题：物理空间仍然存在，故还需设置line-height:0;或使用超小字体(在IE下有点BUG)。*/

最终代码：.texthidden { text-indent:-9999px; white-space:nowrap; line-height:0;}

4、overflow:hidden;

/* 对文字溢出时的自动隐藏处理 （不显示超过对象尺寸的内容 ）*/

这种方法可以与前几种配合使用，于是就会有如下方法：

（1）text-indent：

/* 标签中的文字的文本缩进设置成足够大的值，并且设置容器h1的overflow的值为hidden。实现了图像替换。 */

（2）height:0; width:0;

#header { width: 300px; height: 40px; background-image: url(1.webp);}

5、font-size:1px;

/* 将h1的文字的大小设为1px，颜色设置成与背景图片接近的颜色，也同样实现了CSS图像替换的效果，但此效果需要在特定的背景图片下才显得完美，不然就容易看出来了。*/

#header { width: 300px; height: 40px; background-image: url(1.webp); font-size:1px; color:#fff;}

6、position:absolute;

/* 用绝对定位将其推出可视区，不过虽然可视性不存在，但仍占据物理空间，与隐藏文字的宗旨相背。*/

#header { margin-top:-10000px; margin-left:-10000px; position:absolute;}

以上几种方法中，第四种方法是公认最好的方法，很多站点都采用了overflow:hidden来控制和用图片替换文本，达到隐藏文字的效果。虽然它和第一种方法（display:none;）一样曾经被SEOERs用作优化搜索的工具。即使到了现在，在作弊与反作弊的较量上也几乎没有停止过；如果现在再使用上面的隐藏方法来作弊的话，比如在隐藏内容里堆叠大量的关键词，大量的链接等，搜索引擎K你是没商量。