CSS：仅显示字符串的前两个字母
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35328019/
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
CSS: Display only the first two letters of a string
提问by Blackbam
Is it possible to display only the first two letters of a string using pure CSS?
是否可以使用纯 CSS 只显示字符串的前两个字母？
So far I have tried (without success):
到目前为止，我已经尝试过（没有成功）：
- :first-letter (targets only the first letter and does not work for me anyway)
- :nth-of-everything (requires additional javascript)
- text-overflow: ellipsis; (is adding points)
- overflow: hidden; (only works if the text-size does not change, clumsy solution)
- :first-letter （仅针对第一个字母，无论如何对我不起作用）
- :nth-of-everything（需要额外的 javascript）
- 文本溢出：省略号；（正在加分）
- 溢出：隐藏；（仅在文本大小不变时才有效，笨拙的解决方案）
Is there another way?
还有其他方法吗？
回答by fl0cke
Actually, there is a way to do this in pure css!
It uses the chfont-dependent unit.
实际上，有一种方法可以在纯 css 中做到这一点！它使用ch依赖于字体的单位。
.two_chars{
font-family: monospace;
width: 2ch;
overflow: hidden;
white-space: nowrap;
}
.large{
font-size: 2em;
}<div class="two_chars">
Some long text.
</div>
<div class="two_chars large">
Even longer text.
</div>Unfortunately this works only with monospace fontsand not in older browsers.
不幸的是，这仅适用于等宽字体，不适用于较旧的浏览器。
回答by Fergus
Although I agree css is primarily for styling; there are use cases for "displaying" content using:
虽然我同意 css 主要用于样式；有使用以下方法“显示”内容的用例：
text-overflow: ellipsis
<div class="myClass">
My String
</div>
.myClass {
white-space: nowrap;
width: 39px;
overflow: hidden;
text-overflow: ellipsis;
}
Will show truncated "My"
将显示截断的“我的”
回答by Steven De Groote
If you don't want to go with monospaced fonts, but just want to display as many characters as you want in the available/specified width (without showing half chars), you can use the a work-break rule while making sure you're not displaying the second line:
如果您不想使用等宽字体，而只想在可用/指定宽度（不显示半个字符）中显示任意数量的字符，则可以使用工作中断规则，同时确保“不显示第二行：
.initials {
display: inline-block;
width: 40px;
font-size: 24px;
font-weight: 300;
overflow: hidden;
word-break: break-all;
height: 80px;
line-height: 80px
}
Example here: https://codepen.io/stevendegroote/pen/GRgjQoG
这里的例子：https: //codepen.io/stevendegroote/pen/GRgjQoG
Hope this helps anyone.
希望这可以帮助任何人。
回答by Marc
Like you said, you can do it using nth-of-everything but it requires additional javascript.
就像你说的，你可以使用 nth-of-everything 来完成，但它需要额外的 javascript。
For a single letter you can do this :
对于单个字母，您可以这样做：
#txt {
visibility: hidden;
}
#txt::first-letter {
visibility: visible;
}
<p id='txt'>hello</p>
here is the fiddle : https://jsfiddle.net/nvf890vo/
这是小提琴：https: //jsfiddle.net/nvf890vo/
For multiple letters you have to mix with html, for example :
对于多个字母，您必须与 html 混合，例如：
<p><span class='show'>He</span>llo</p>
And apply the visible state to class "show".
并将可见状态应用于“show”类。
