仅显示第一个字母

Question

让我们说这个标记:

<div id="socialMedia">
    <a class="Twitter">Twitter</a>
</div>

我想要的只是在文本的第一个字母可见(在这种情况下,只是一个T)

(实际上我不会最终使用它,但我对此感到好奇;以后肯定会有所帮助)

所以这是我的尝试:

#socialMedia .Twitter{
    display:none;
}
#socialMedia .Twitter:first-letter {
    display: block !important;
}

我能够检查它是否会实现它.问题是为什么？这有什么解决方法吗？

-编辑-

我们正在寻找IE = + 7/8版本的解决方案..

萨吕

Answer 1

编辑:免责声明:根据评论,这不起作用.请不要按原样使用,不要检查它是否符合您的需求.

如果检查:first-letter伪元素的规范,您会注意到以下内容:

:first-letter伪元素必须选择块第一行的第一个字母,如果它的行之前没有任何其他内容(如图像或内联表).

这里重要的一词是"阻止".

您正尝试在<a/>类的标签上使用伪元素Twitter.默认情况下,锚标记是内联元素(不是块级元素).

对于您给定的标记,您问题的一个解决方案是以这种方式设置锚点样式:

.Twitter {
    display:block;
    visibility:hidden;
}

.Twitter:first-letter {
    visibility:visible;
}?

我不确定你到底想要什么,但这对于实验目的来说已经足够了.点击这里的演示:http://jsfiddle.net/H7jhF/.

Answer 2

尝试这样的事情:

.Twitter {
  font-size: 0;
}

.Twitter:first-letter {
  font-size: 12px;
}

<div class="Twitter">Twitter</div>

也许这不是最好的解决方案,但它确实有效.

Answer 3

另一种方法是使用 color: transparent

.twitter{
  display: block;
  color: transparent;
}

.twitter:first-letter{
  color: #000;
}

<div id="socialMedia">
    <a class="twitter">Twitter</a>
</div>

但是,这对lte IE8 不起作用.

参考文献: