您当前的位置:主页 > 教程合集 > Html/css > 网站首页Html/css
利用Div+Css实现隐藏文字内容的几种方法
发布时间:2016-01-01 09:22:01编辑:余斗阅读:(0)字号: 大 中 小
在网页前端设计的过程中,我们很多时候需要隐藏特定的图片或者文字来实现一些功能,比如我们希望用统计代码而不希望统计图标显示在网页中,或者指定一些链接而不希望链接文字显示出来,这时就需要用DIV+CSS来实现了。
利用Div+Css实现隐藏文字内容主要有以下几种方法可用:
1、display:none:
这个是最方便方法,指定一个div,然后加上display:none属性,而且这样不会出bug。 经测试 ie6.0 、 7.0 、firefox 3.010 通过。但是遗憾的是,这样会多了个标签,循环中使用的话,html又多了一堆字节,所以单个按钮推荐这样使用。
而针对input value的隐藏这个方式就有些吃力了,所以还是只能用block加text-indent来“偏移”模拟隐藏了,完整代码为:
display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
另外要注意的是,它可以使包括容器本身在内的东西都消失,简便且有效,但它有两个耳熟能详的缺陷,那就是对搜索引擎不友好,且被屏幕阅读器所忽略,如果想隐藏文字但是又要被搜索引擎抓取的话不推荐用这个方法。
2、text-indent:-9999px:
text-indent是首行缩进,所以对于多行文本,若单独使用它就有明显的不足,需加上white-space:nowrap;来弥补不足,可是他有一个局限性 他只适用于块级元素block,而我们往往有时候想偏移掉的a上的字体,所以问题就来了:text-indent:-9999px;虽然用起来比较惬意,将a转化成block的话 往往他身后的的元素就被他赶到下一行了,如果正好这个a后面 是一个a按钮,就要用float浮动,这样有些麻烦。
还有一个问题:物理空间仍然存在,故还需设置line-height:0;或使用超小字体(在IE下有点BUG),最终代码如下:
text-indent:-9999px;
white-space:nowrap;
line-height:0;
3、line-height:0:
这个方法能完美“隐藏”掉background之上的内容,经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过。
完整代码为:
line-height:0;
font-size:0;
overflow:hidden;
4、overflow:hidden:
这是一个比较合理且是余斗最喜欢的方法,具体代码如下:
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:300px;
height:100px;
padding:100px 0 0;
background:url();
我们还可以附加:positon:absolute:用绝对定位将其推出可视区,不过虽然可视性不存在,但仍占据物理空间,与隐藏文字的宗旨相背,代码为:
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:300px;
height:100px;}
.replacement a{
padding:100px 0 0;
background:url();
以上四种方法都能实现隐藏文字,但是各有优缺点,我们在实际应用的过程中需要根据实际情况来选择。
下一篇:CSS学习之多类选择器