只显示第一个字母

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

试试这样的：

.Twitter {
  font-size: 0;
}

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

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

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

Answer 2

编辑：免责声明：根据 cmets，这不起作用。请不要在未检查是否符合您的需求的情况下按原样使用。

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

:first-letter 伪元素必须选择块第一行的第一个字母，如果它的行上没有任何其他内容（例如图像或内联表）。

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

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

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

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

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

我不确定你到底想要什么，但这对于实验目的来说已经足够了。在此处查看演示：http://jsfiddle.net/H7jhF/。

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。

参考资料：

• IE7 IE8 IE9 color:transparent property
• color: transparent is not working in Internet Explorer

Answer 4

你所做的就像隐藏一个父元素并试图显示它的一个子元素，它不会起作用，因为父元素的样式会覆盖它。父元素也必须是块级元素才能工作。就像div 或p 标签，或a 标签上的display: block;。

这是使用颜色的东西：

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;
    }