通常偏移掉字体的方式是

（1）

使用text-indent:-9999px;

可是他有一个局限性 他只适用于块级元素block

而我们往往有时候想偏移掉的a上的字体 所以问题就来了 text-indent:-9999px;虽然用起来比较惬意 将a转化成block的话 往往 他身后的的元素就被他赶到下一行了 如果正好这个a后面 是一个a按钮 就要用float来浮动以使他身后再出现簇拥者 这样是不是有些麻烦呢

（2）

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

能完美“隐藏”掉你background之上的字体

经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

（3）

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

而针对input value的隐藏这个方式就有些吃力了

所以还是只能用block加text-indent来“偏移”模拟隐藏了 display:block; font-size:0; line-height:0; text-indent:-9999px; 经测试 ie6.0 、 7.0 、firefox 3.010 通过 (4)

CSS隱藏多余文字為...

class="g_p_center g_t_right g_c_pdin g_h_20 c08" style="margin-bottom: 15px"> class="g_p_left"> > <div style="width:100px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看，hi.baidu.com/commy,试试看，hi.baidu.com/commy,</div> class="g_blog_list"> class="g_t_center g_c_pdin g_p_center c07 content"> class="ns_content">

语法： 

text-overflow : clip | ellipsis  参数：  clip : 　不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！） ellipsis : 　当对象内文本溢出时显示省略标记（...） 说明：  设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 请您注意，text-overflow:ellipsis属性在FF中是没有效果的。 示例： div { text-overflow : clip; }  text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

本文转自寒意博客园博客，原文链接：http://www.cnblogs.com/hnyei/archive/2011/10/14/2211147.html，如需转载请自行联系原作者