FED实验室 - 专注WEB端开发和用户体验

CSS隐藏文字的几种方式

CSS(3) 煦涵 3967℃ 0评论

方式一:text-indent:-9999px
不多说

方式二: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>
<div class="btn">
	<a class="btn_download" href="#" title="下载">下载</a>
</div>

方式四: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;
}
在此感谢张工的分享!!

 

如果你有更多好的方式,欢迎留言交流,不足之处还望指正!

 

 

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址