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伪元素的规范，您会注意到以下内容：

：第一个字母的伪元素必须选择一个块第一行的第一个字母，如果它前面没有任何其他内容（如图像或内联表）。

这里重要的词是“阻止”。

您正尝试在类<a/>的{{1}}标记上使用伪元素。默认情况下，锚标记是内联元素（不是块级元素）。

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

Twitter

我不确定你到底想要什么，但这对于实验目的来说已经足够了。在这里查看演示：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>

JSFiddle

但是，这不适用于 lte IE8。

参考文献：

Answer 4

你正在做的就是隐藏一个父元素并试图显示它的一个子元素，它将无法工作，因为父元素的样式会覆盖它。父元素也必须是块级元素才能工作。与div或p标记一样，或display: block;标记上的a。

这是使用颜色的东西：

HTML

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

CSS

body {
  background-color:#FFF;
}
.Twitter{
    display: block;
    color:#FFF;
}
.Twitter:first-letter {
    color:#000;
}

Answer 5

从页面上拍摄内容并使用动态内容显示该字母：

  
.twitter{
    text-indent:-9999px;
    display:block; 
    position:relative;
}
.twitter:before,.twitter::before{
    content:"T";
     position:absolute;
    width:10px;
    height:15px;
    z-index:100; 
    text-indent:9999px;
}

在这个小提琴中发挥作用：
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/

Answer 6

为什么不使用JavaScript并将字符串拆分为数组并使用数组中的第一项。或者charAt（）

Answer 7

纯CSS答案使用可见性和颜色技巧来隐藏剩余的字母，但它们仍然存在并影响布局。它可能导致布局问题，例如如果你想漂浮元素并在它旁边放一些东西。

我发现了一种没有隐藏元素的有趣方法。诀窍是将整个单词缩小到几乎没有，然后炸掉第一个字母。它有点像OP试图做的，但它的工作原理是因为它在一个连续的频谱而不是display: none上运行，只关闭它内部的任何东西。（类似于数字情况的种类。）

Demo

HTML：

<div>Ding Dong</div> and other stuff

CSS：

div {
  font-size: 0.0000016px;
  float: left;
}

div::first-letter {
  color: red;
  font-size: 10000000em;
}

结果：

Answer 8

这就是我的所作所为：

.Twitter{
        display:block;
        width:1ch;
        overflow:hidden;
        white-space: nowrap;
    }

仅显示第一个字母

8 个答案: