&nbs p;
一、文不在长，有货则灵
图片式按钮的文字隐藏看来是大家都比较关注的一个问题（分享讨论、微博转发等可见一斑）， text-indent 负值为最常用方法，然问题有三：
较大的负值有 性能问题 ，例如新浪/腾讯微博提交按钮的 -9999em ，大概12~16万像素的宽度，相对于100个显示器宽度，在低配Android pad上，尤其含动画效果的时候，会直接卡爆； FireFox浏览器下虚框。其实问题不大， overflow:hidden 可修复； 不能应用在IE6/IE7伪 inline-block 水平元素上，否则元素会被 text-indent 拐走。即使有人提出：
{ text-indent: 100%; white-spacing: nowrap; overflow: hidden; } 除了性能有所缓解，后面两个问题依旧存在。
二、法不在高，能用则行
上周分享，有同行提到另外一个隐藏之法，简称为： font: 0/0 a 法。
释义为，字号大小 0 , 行高 0 ，字体 a 是因为就一个字母，换成 b 也是OK的，实际并无 a 字体。日本高中社团要至少4个人才能成立，游泳社就3个人，于是就去田径队找了个旱鸭子来充数，这个旱鸭子就是这里的 a .
一般要配合 overflow: hidden 使用。
实例顶千言，您可以狠狠地点击这里：font:0/0 a与按钮文字隐藏demo
CSS 代码如下：
. BT n { dis play : inline-block; width: 52px; h ei ght: 25px; border: 0; background: # f0f0f0 url(/study/image/flash_copy_btn.png); font: 0/0 a; overflow: hidden; /* 抹掉a标签按钮最上面的小点 */ } 说明：
网上有说法是Ch rom e下需要添加 color: transparent ， 不过 据我win7 C hr ome浏览器查看，没什么问题，因此CSS中无此声明； overflow: hidden 用来解决IE6浏览器下， a 元素等模拟标签下最顶部残存小点点的问题。 对于原生的 button 按钮元素，此方法表示无能为力，低版本IE浏览器下，小点点依旧存在，如下放大后的截图：
相比 text -i ndent 负值缩进，此方法优点在于可以应用在 inline-block 水平元素上；不足在于不能用在原生的 button 按钮元素上。
因此，还有改进余地以及寻找更好方法的动力。
三、斯是吾法，齐论德馨
此方法是我午饭后打瞌睡的时候想到的，一句话概括就是 let ter -s pacing 负值+ First -letter 伪元素负值实现。
对于新方法，先展示效果才能让 别人 有继续深入的兴趣。您可以狠狠地点击这里：letter-spacing/first-letter与按钮文字隐藏demo
IE6浏览器下的截图如下：
CSS代码如下：
.btn { display: inline-block; width: 52px; height: 25px; border: 0; background: #f0f0f0 url(/study/image/flash_copy_btn.png); letter-spacing: -3em; overflow: hidden; } .btn:first-letter { m arg in-left: -20em; } 1. 关于letter-spacing负值
letter-spacing 控制字符间距，可以是负值，可以让字符水 平方 向重叠，甚至倒序排列，如值为 -2em 时候。选择下面下拉值，可以看到不同 letter-spacing 大小对应效果：
更改letter-spacing大小： 2em 1em 0 -1em -2em
我是测试文字！
(function() { VAR eleSel = document.getElementById("letterSpacingSel"), eleP = document.getElementById("letterSpacingP"); eleSel.onchange = function() {eleP.style.letterSpacing = this.value + "em";};})();
于是，如果按钮 text-align 为 left 的话， letter-spacing 值在小于 -2em 的时候，字符都跑到了首字符的左侧（也就是在按钮的外面）。一旦按钮设置了 overflow:hidden ， 除了第一个字符，其余字符都隐藏了 ！
2. 关于first-letter伪元素
first-letter 伪元素与 first-line 伪元素实际是表兄弟关系， first-line 可以实现IE6/IE7的单标签多背景效果，前不久刚介绍，那 first-letter 呢？
顾名思意， first-letter 控制第一个字符的样式，IE5.5 开始 支持，支持的样式有（参考自MDN）：
所有字体相关属性： font , font-style , font-variant , font-weight , font-size , line-height 以及 font-f ami ly . 所有背景相关属性： background-color , background-image , background-pos IT ion , background-re PE at , background-size , 以及 background-attachment . 所有 mar gin 相关属性： margin , margin -t op , margin-right , margin-bottom , margin-left . 所有 padding 相关属性： padding , padding-top , padding-right , padding-bottom , padding-left . 所有border相关属性：缩写的 border , border-style , border-color , border-width 及普通书写的属性。 color 属性。 text-decoration , text-transform , letter-spacing , word-spacing (合适情境下), line-height , float , vert ical -align (只有当 float 为 none 的时候)这些CSS属性们.要隐藏第一个字符，我采用的就是 margin 负值。例如：
.btn:first-letter { margin-left: -20em; } 于是， 字符们全部都隐藏了 ！
当然，还是有些需要说明的。
3. 其他一些说明：
此方法兼容IE6+, 适用于 inline-block 水平元素，且适用于 button 元素，不过，需要是下面这种写法：
<button type="button/s ub mit">按钮</button>
而不能是这样子：
<input type="button/submit" value="按钮" />此方法受 text-align 属性影响。 letter-spacing 负值+ first-letter 的 margin 负值适用于 text-align:left; 的情况，如果按钮 text-align 为 right ，则 letter-spacing 以及 first-letter 的 margin 需要使用正值。
值的大小其实没有定值。一般， letter-spacing 绝对值 大于 2em 可以，首字符 margin 可以大一些，demo中是 -20em . 多个 :first-letter 伪元素不要使用逗号分隔，貌似会全部失效，应分开写 使用逗号分隔的时候逗号前面一定要留一个空格，就跟众所周知的 { 前面要留有空格一样，否则，IE6浏览器会忽略这条声明：
.btn:first-letter, . img :first-letter { margin-left: -20em; } .btn:first-letter , /* 逗号前需有1个空格 */ .img:first-letter { margin-left: -20em; } 未大规模测试，欢迎反馈问题。
在实际应用的时候，我们可以把该功能的CSS独立出来，公共使用，例如：
.notext { text-align: left; letter-spacing: -3em; overflow: hidden; } .notext:first-letter { margin-left: -20em; } 四、不是会两句古诗就了不起的
其实呢，如果不要兼顾原生 button 按钮，还可以使用 padding 撑开容器 尺寸 隐藏文字的方法，类似下面：
.btn { display: inline-block; padding-top: 25px; width: 52px; height: 0 ; background: #f0f0f0 url(/study/image/flash_copy_btn.png); overflow: hidden; } 代码少，理解 简单 ，兼容性还不错。就是不能用在正宗的按钮元素上（IE6/IE7直接隐藏抗议）。
五、孔子曰：“何陋之有？”
letter-spacing + first-letter 隐藏文字的方法动用了伪元素，方法虽糙，但效果不糙。我个人 觉得 比前两种方法都要好一些，您觉得呢？
行文仓促，文中难免有表达不准确之处，欢迎指正；如果有技 术 性错误，务必指出，感谢阅读！
@H_ 512 _349@
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-letter-spacing+first-letter实现按钮文字隐藏 全部内容，希望文章能够帮你解决 html5教程-letter-spacing+first-letter实现按钮文字隐藏 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-letter-spacing+first-letter实现按钮文字隐藏的详细内容...