CSS隐藏网页文字的几种常用方法

display:none的神奇力量

在日常的网页设计中，你是否遇到过需要隐藏某些元素但又不想影响页面布局的情况？这时，“display:none”这一CSS属性便派上了用场。它如同隐形的魔法，能让包括容器本身在内的元素瞬间消失，简便且有效。它并非完美无缺，如同每把剑都有其双刃，它也有两大缺点。

这个属性对搜索引擎不够友好。搜索引擎的爬虫在抓取网页时，可能会忽略掉这些被设置为“display:none”的元素，导致这些元素中的信息无法被搜索引擎索引。这一属性也会被屏幕阅读器忽视，对于视障用户或者需要使用屏幕阅读器的用户来说，他们无法获取到这些隐藏元素的信息。

接下来要介绍的是text-indent:-9999px。这个属性主要用于首行缩进，但如果要隐藏多行文本，单独使用它显然不够。这时需要搭配white-space:nowrap;来防止文本自动换行。但即便如此，物理空间依然存在，要想彻底隐藏文本，还需要调整line-height:0;或使用超小字体。不过需要注意的是，在IE浏览器下可能会遇到一些小问题。具体的代码如下：`.texthidden{ text-indent:-9999px; white-space:nowrap; line-height:0; }`。

而overflow:hidden是我最推荐的方法（狼蚁SEO站长注）。这种方法相对更为合理。通过将元素设置为块级元素并隐藏其溢出内容，可以有效地隐藏文本而不影响页面布局。具体的代码为：`.texthidden{ display:block;/统一转化为块级元素/ overflow:hidden; width:0; height:0; }`。

还有一种方法是使用positon:absolute，即将元素绝对定位并推出可视区域。这种方法虽然让元素在视觉上消失了，但它仍然占据物理空间，与真正的隐藏文字相去甚远。具体代码为：`.texthidden{ position:absolute; margin-top:-9999px; margin-left:-9999px; }`。这样设置后，元素会被推到页面的极远处，视觉上看不到，但仍然占据空间。最后提到的`cambrian.render('body')`可能是某种特定框架或库中的函数调用，但在标准的CSS中并未涉及。