css - 只显示第一个字母

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 版本的解决方案..

致敬

score 29 · Accepted Answer

尝试这样的事情：

.Twitter {
  font-size: 0;
}

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

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

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

score 25 · Accepted Answer

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

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

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

这里重要的词是“块”。

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

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

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

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

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

score 6 · Accepted Answer

另一种方法是使用color: transparent

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

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

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

JSFiddle

但是，这不适用于lte IE8。

参考：

score 2 · Accepted Answer

你所做的就像隐藏一个父元素并试图显示它的一个子元素，它不会起作用，因为父元素的样式会覆盖它。父元素也必须是块级元素才能工作。就像一个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;
}

score 2 · Accepted Answer

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

  
.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/

score 1 · Accepted Answer

为什么不直接使用 JavaScript 并将字符串拆分为数组并使用数组中的第一项。或 charAt()

score 1 · Accepted Answer

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

我找到了一种有趣的方法来做到这一点，而无需隐藏元素。诀窍是将整个单词缩小到几乎没有，然后只炸掉第一个字母。这有点像 OP 试图做的事情，但它之所以有效，是因为它在连续频谱上运行，而不是display: none仅仅关闭其中的任何东西。（一种模拟>数字的情况。）

演示

HTML：

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

CSS：

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

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

结果：

score 0 · Accepted Answer

这就是我所做的：

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

css - 只显示第一个字母

8 回答 8

Related

Reference