您当前的位置:主页 > 教程合集 > Html/css网站利发国际Html/css

利用Div+Css实现隐藏文字内容的几种方法

发布时间:2016-01-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 div 隐藏文字
余斗余斗
  1. 转载请注明: 利用Div+Css实现隐藏文字内容的几种方法_余斗余斗_利发国际
  2. 版权声明: 本站原创文章,由 发表在 Html/css 分类下,于2016-01-01最后更新
CSS3中nth-child()选择器的用法
CSS学习之多类选择器
手机扫一扫 随身带着看

利发国际

百度360搜索搜狗搜索