CSS掩藏网页页面文本的几种方法总结

日期：2020-12-12 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

方法1：text-indent:⑼999px
很少说，ext-indent负值为最常见方式，然难题有3：
1.较大的负值性爱能难题，比如新浪/腾迅新浪微博递交按钮的⑼999em，大约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; }  

除特性有一定的减缓，后边两个难题依然存在。

方法2：font-size:0
此方法在沒有给器皿设定height 或行高的状况下，设定font-size:0,则器皿将无高宽比

方法3：设定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>  

方法4：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必须应用恰逢。
值的尺寸实际上沒有定值。1般，letter-spacing肯定值超过2em能够，首标识符margin能够大1些，demo中是⑵0em.
3.好几个:first-letter伪元素不必应用逗号隔开，貌似会所有无效，应分开写应用逗号隔开的情况下逗号前面1定要留1个空格。不然，IE6访问器会忽视这条申明：

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

4.可放到公共性款式中，独立启用

CSS Code拷贝內容到剪贴板
  1. .notext {   
  2.     text-align: left;   
  3.     letter-spacing: ⑶em;   
  4.     overflow: hidden;   
  5. }   
  6. .notext:first-letter {   
  7.     margin-left: ⑵0em;   
  8. }  
上一篇：用CSS特性transparent完成各种各样3角形示例编码 返回下一篇：详解CSS中的挑选器优先选择级及款式堆叠难题处