您现在的位置是：网站首页> 编程资料编程资料

CSS隐藏页面文字的几种方式总结CSS隐藏文字的6种方法深入分析网页CSS隐藏文字和以图换字技术-CSS教程-网页制作-网页教学网CSS实现在文章每段后面加入带连接的隐藏文字-CSS教程-网页制作-网页教CSS教程:text-indent隐藏文字出现虚线框outline-CSS教程-网页制作-网页

2021-09-05 805人已围观

简介 这篇文章主要介绍了CSS隐藏页面文字的几种方式总结,其中第二种font-size:0在使用时要特别注意Firefox上的显示效果,需要的朋友可以参考下

方式一：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. "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.   
  5. "btn">   
  6.  "btn_download" href="#" title="下载">下载   
  

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

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

而不能是这样子：

CSS Code复制内容到剪贴板
  1. "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. }  

上一篇：CSS3的Flexbox骰子布局的实现及问题讲解利用CSS3的flexbox实现水平垂直居中与三列等高布局基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南css3弹性盒模型（Flexbox）详细介绍CSS3 Flexbox中flex-shrink属性的用法示例介绍10分钟理解CSS3 FlexBox弹性布局

下一篇：老生常谈CSS中的长度单位CSS控制文本的长度 超过一行显示省略号的实现方法用css控制字符串的输出长度超出时隐藏详解CSS中的几种长度px、em、ptCSS的em、px、pt长度单位转换示例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网