快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

CSS怎么隐藏页面文字

本篇内容主要讲解“CSS怎么隐藏页面文字”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么隐藏页面文字”吧!

创新互联建站主营企业营销型网站建设,为众多企业提供了成都品牌网站建设服务,建网站哪家好?拥有多年的全网整合营销推广流程,能够为企业定制化制作网站服务,在公司网站建设维护方面成绩突出。

方式一: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.   

  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.   

  5.   

  6.  下载   

  

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

CSS Code复制内容到剪贴板

  1. 按钮  

而不能是这样子:

CSS Code复制内容到剪贴板

  1.   

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怎么隐藏页面文字”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


分享名称:CSS怎么隐藏页面文字
文章URL:http://6mz.cn/article/pdjhgs.html

其他资讯