CSS 只显示首字母
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11512989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display first letter only
提问by Toni Michel Caubet
Lets say this markup:
让我们说这个标记：
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
我想要的只是文本的第一个字母（在这种情况下，只是一个 T）
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
（实际上我最终不会使用它，但我对此很好奇；以后肯定会有所帮助）
So this was my a attempt:
所以这是我的尝试：
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
我能够检查它不会实现它。问题是为什么？是否有一些解决方法？
-EDIT-
-编辑-
We are looking for IE=+7/8 version capable solutions..
我们正在寻找支持 IE=+7/8 版本的解决方案..
Salut
敬礼
回答by TJ Koblentz
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
编辑：免责声明：根据评论，这不起作用。请不要在没有检查它是否符合您的需求的情况下按原样使用。
If you check the specification for the :first-letterpseudo-element, you'll notice the following:
如果您检查:first-letter伪元素的规范，您会注意到以下内容：
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
:first-letter 伪元素必须选择块第一行的第一个字母，如果它的行上没有任何其他内容（例如图像或内联表）。
The important word here is "block."
这里的重要词是“块”。
You are trying to use the pseudo-element on an <a/>tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
您正在尝试在<a/>类为的标签上使用伪元素Twitter。默认情况下，锚标记是行内元素（不是块级元素）。
For your given markup, one solution to your problem would be to style the anchor this way:
对于您给定的标记，问题的一种解决方案是以这种方式设置锚点样式：
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}?
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
我不确定您到底要做什么，但这对于实验目的来说已经足够了。在此处查看演示：http: //jsfiddle.net/H7jhF/。
回答by Dexter_ns88
Try something like this:
尝试这样的事情：
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}<div class="Twitter">Twitter</div>Maybe this is not the best solution, but it works.
也许这不是最好的解决方案，但它有效。
回答by Vucko
Another way is to use color: transparent
另一种方法是使用 color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>However, this won't work for lteIE8.
但是，这不适用于lteIE8。
References:
参考：
回答by albert
shoot the content off the page and show the letter using dynamic content:
从页面上拍摄内容并使用动态内容显示字母：
.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;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
在这个小提琴中发挥作用：http:
//jsfiddle.net/jalbertbowdenii/H7jhF/67/
回答by sachleen
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a divor ptag, or display: block;on the atag.
你所做的就像隐藏一个父元素并试图显示它的一个子元素，它不会起作用，因为父元素的样式覆盖了它。父元素也必须是块级元素才能工作。像一个div或p标签，或display: block;在a标签上。
Here's something using color:
这是使用颜色的东西：
HTML
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
回答by njsokol
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
为什么不直接使用 JavaScript 并将字符串拆分为数组并使用数组中的第一项。或 charAt()
回答by mahemoff
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
纯 CSS 答案使用可见性和颜色技巧来隐藏剩余的字母，但它们仍然存在并影响布局。它可能会导致布局问题，例如，如果您希望浮动元素并在其旁边放一些东西。
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: nonewhich just shuts down anything inside it. (Kind of an analogue > digital situation.)
我找到了一种没有隐藏元素的有趣方法。诀窍是将整个单词缩小到几乎为零，然后只炸掉第一个字母。这有点像 OP 试图做的，但它之所以有效，是因为它在连续频谱上运行，而不是display: none仅仅关闭其中的任何东西。（一种模拟 > 数字情况。）
HTML:
HTML：
<div>Ding Dong</div> and other stuff
CSS:
CSS：
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
结果：
回答by Nikolay
Here's what I do:
这是我所做的：
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
