css隐藏文字一些方法总结

有时候，我们会用图片代替文字，最常用的就是用在input按钮上。
以前，我都会用text-indent:-9999px将文字移到页面外面，但这个方法在IE6下有个“bug”，不属于块元素的应用此css属性后，此块的内容也会消失，这时候需要将这块内容设置为块元素（display:block;）.
最近，我习惯给一些固定长宽的元素使用line-height:999em进行移除文字，但这时候需要给此元素添加一个overflow:hidden进行截断,否则此块就会被line-height:999em拉得很高。

这个方法，我之前没注意，以为这样不会出问题，但今天我才意外地发现，如果用在input的按钮上时，input的value值在火狐浏览器下还是正常显示，没有受line-height:999em的影响。IE6和谷歌浏览器正常。

这时候，如果后端需要给这个按钮的value存放一个值，这个方法就没法用了，只能用回text-indent,但是呢，这时候这个元素不属于块元素，因为排版的问题，也不想进行改动，给其转化为块元素，那怎么办？只能是用这text-indent:-9999px;然后给IE6单独指定一个_line-height:999em。虽然很??拢??仓荒苷庋?/p>

CSS隐藏多余文字

（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; }

您可能感兴趣的文章：
CSS隐藏文字的一些方法总结
css隐藏文字一些方法总结
jQuery 动态酷效果实现总结
php隐藏IP地址后两位及替换手机号中间数字为*号的方法
Python封装机制及实现方法
网页技巧：具有亲和力的CSS隐藏文字方法
剑网3洛阳城 “疾风”希古敖隐藏任务完成攻略
jQuery的显示和隐藏方法与css隐藏的样式对比
css隐藏滚动条(横向,坚向)
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)