在CSS中实现隐藏文字有多种方式

发布时间：2023-10-26 09:26:52 所属栏目：语言来源：

导读：很多朋友都对“在CSS中实现隐藏文字有几种方法”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

有时候，我

很多朋友都对“在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。

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"> >

psis; border:1px solid red">试试看，hi.baidu.com/commy,试试看，hi.baidu.com/commy, 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; }

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!