极乐门资源网 Design By www.ioogu.com

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

CSS Code复制内容到剪贴板
  1. { text-indent: 100%; white-spacing: nowrap; overflow: hidden; }  

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

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

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

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2.  .btn{height: 22px;width: 55px;overflow: hidden;}   
  3.  .btn_download{display: inline-block;width:55px;height: 22px;padding-top:22px;background:url(btn_download.gif) no-repeat;text-align:center;}   
  4. </style>   
  5. <div class="btn">   
  6.  <a class="btn_download" href="#" title="下载">下载</a>   
  7. </div>  

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

CSS Code复制内容到剪贴板
  1. <button type="button/submit">按钮</button>  

而不能是这样子:

CSS Code复制内容到剪贴板
  1. <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浏览器会忽略这条声明:

CSS Code复制内容到剪贴板
  1. .btn:first-letter,   
  2. .img:first-letter {   
  3.     margin-left: -20em;   
  4. }   
  5.   
  6. .btn:first-letter ,    /* 逗号前需有1个空格 */  
  7. .img:first-letter {   
  8.     margin-left: -20em;   
  9. }  

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

CSS Code复制内容到剪贴板
  1. .notext {   
  2.     text-align: left;   
  3.     letter-spacing: -3em;   
  4.     overflow: hidden;   
  5. }   
  6. .notext:first-letter {   
  7.     margin-left: -20em;   
  8. }  
标签:
CSS,隐藏文字

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“CSS隐藏页面文字的几种方式总结”

暂无CSS隐藏页面文字的几种方式总结的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?