css隐藏/显示文字的方法

最近做了一个demo，写了一个图片轮播，在图片轮播的时候显示对图片的文字解释，要求文字不跟随图片滚动默认显示。花了一点点时间，解决了这个办法，最后总结了一下在html中用css隐藏文字的方法。

（1）偏移掉字体的方式
使用text-indent:-9999px; 这种方法有一个局限性只适用于块级元素。
（2）字体为零不显示，能完美“隐藏”掉你background之上的字体，经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

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

（3）display:none
最方便的是加个span，然后display:none，而且这样不会出bug。
遗憾的是，多了个标签，循环中使用的话，html又多了一堆字节，单个按钮推荐这样使用。

(4)CSS隐藏多余文字
　　text-overflow : clip | ellipsis

　　参数：
　　clip : 　不显示省略标记（…），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（…）

　　说明：
　　设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。
　　请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

　　示例：
　　div { text-overflow : clip; }

　　text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。