letter-spacing+first-letter实现按钮文字隐藏

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

本文地址：http://www.zhangxinxu.com/wordpress/?p=3557

一、文不在长，有货则灵

图片式按钮的文字隐藏看来是大家都比较关注的一个问题（分享讨论、微博转发等可见一斑）， 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代码如下：

.btn {

    display: inline-block;

    width: 52px; height: 25px;

    border: 0;

    background: #f0f0f0 url(/study/image/flash_copy_btn.png);

    font: 0/0 a;

    overflow: hidden;    /* 抹掉a标签按钮最上面的小点 */

}

说明：

网上有说法是Chrome下需要添加 color: transparent ，不过据我win7 Chrome浏览器查看，没什么问题，因此CSS中无此声明；
overflow: hidden 用来解决IE6浏览器下， a 元素等模拟标签下最顶部残存小点点的问题。
对于原生的 button 按钮元素，此方法表示无能为力，低版本IE浏览器下，小点点依旧存在，如下放大后的截图：

相比 text-indent 负值缩进，此方法优点在于可以应用在 inline-block 水平元素上；不足在于不能用在原生的 button 按钮元素上。

因此，还有改进余地以及寻找更好方法的动力。

三、斯是吾法，齐论德馨

此方法是我午饭后打瞌睡的时候想到的，一句话概括就是 letter-spacing 负值+ 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 {

    margin-left: -20em;

}

1. 关于letter-spacing负值
letter-spacing 控制字符间距，可以是负值，可以让字符水平方向重叠，甚至倒序排列，如值为 -2em 时候。选择下面下拉值，可以看到不同 letter-spacing 大小对应效果：

更改letter-spacing大小：

2em

1em

-1em

-2em

我是测试文字！

于是，如果按钮 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-family .
所有背景相关属性： background-color , background-image , background-position , background-repeat , background-size , 以及 background-attachment .
所有 margin 相关属性： margin , margin-top , 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 , vertical-align (只有当 float 为 none 的时候)这些CSS属性们.

要隐藏第一个字符，我采用的就是 margin 负值。例如：

.btn:first-letter {

    margin-left: -20em;

}

于是， 字符们全部都隐藏了 ！

当然，还是有些需要说明的。

3. 其他一些说明：

此方法兼容IE6+, 适用于 inline-block 水平元素，且适用于 button 元素，不过，需要是下面这种写法：
```
<button type="button/submit">按钮</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直接隐藏抗议）。