• 技术文章 >web前端 >css教程

    浅析CSS隐藏页面文字的几种方式总结

    高洛峰高洛峰2017-03-08 14:37:44原创1074
    方式一:text-indent:-9999px

    不多说,ext-indent负值为最常用方法,然问题有三:
    1.较大的负值有性能问题,例如新浪/腾讯微博提交按钮的-9999em,大概12~16万像素的宽度,相对于100个显示器宽度,在低配Android pad上,尤其含动画效果的时候,会直接卡爆;
    2.FireFox浏览器下虚框。其实问题不大,overflow:hidden可修复;
    3.不能应用在IE6/IE7伪inline-block水平元素上,否则元素会被text-indent拐走。
    即使有人提出:

    { text-indent: 100%; white-spacing: nowrap; overflow: hidden; }

    除了性能有所缓解,后面两个问题依旧存在。

    方式二:font-size:0
    此方式在没有给容器设置height 或者行高的情况下,设置font-size:0,则容器将无高度

    方式三:设置padding,撑开容器

    <style type="text/css">   
     .btn{height: 22px;width: 55px;overflow: hidden;}   
     .btn_download{display: inline-block;width:55px;height: 22px;padding-top:22px;background:url(btn_download.gif) no-repeat;text-align:center;}   
    </style>   
    <p class="btn">   
     <a class="btn_download" href="#" title="下载">下载</a>   
    </p>

    方式四:letter-spacing+first-letter
    1.此方法兼容IE6+, 适用于inline-block水平元素,且适用于button元素,不过,需要是下面这种写法

    <button type="button/submit">按钮</button>

    而不能是这样子:

    <input type="button/submit" value="按钮" />

    2.此方法受text-align属性影响。
    text-align:left;letter-spacing+first-letter的margin使用负值,
    text-align:right;letter-spacing+first-letter的margin需要使用正值。
    值的大小其实没有定值。一般,letter-spacing绝对值大于2em可以,首字符margin可以大一些,demo中是-20em.
    3.多个:first-letter伪元素不要使用逗号分隔,貌似会全部失效,应分开写使用逗号分隔的时候逗号前面一定要留一个空格。否则,IE6浏览器会忽略这条声明:

    .btn:first-letter,   
    .img:first-letter {   
        margin-left: -20em;   
    }   
    
    .btn:first-letter ,    /* 逗号前需有1个空格 */
    .img:first-letter {   
        margin-left: -20em;   
    }

    4.可放到公共样式中,单独调用

    .notext {   
        text-align: left;   
        letter-spacing: -3em;   
        overflow: hidden;   
    }   
    .notext:first-letter {   
        margin-left: -20em;   
    }

    以上就是浅析CSS隐藏页面文字的几种方式总结的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 隐藏文字
    上一篇:CSS中的长度单位的详细说明 下一篇:CSS3的Flexbox骰子布局的实现及问题示例讲解
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 聊聊怎么巧用CSS给普通黑色二维码添上彩色渐变!• 利用纯CSS如何在滚动时自动添加头部阴影• 什么是BFC?深入了解BFC,聊聊作用• CSS3动画实战之:超酷炫的粘性气泡效果• 纯CSS3怎么实现波浪效果?(代码示例)
    1/1

    PHP中文网