CSS:仅显示字符串的前两个字母

Question

是否可以使用纯CSS仅显示字符串的前两个字母？

到目前为止,我已经尝试过(没有成功):

• :第一个字母(仅针对第一个字母,但对我来说无效)
• :nth-​​of-everything(需要额外的javascript)
• 文本溢出:省略号; (正在加分)
• 溢出:隐藏; (仅当文本大小没有改变时才有效,笨拙的解决方案)

还有另外一种方法吗？

Answer 1

实际上,有一种方法可以在纯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>

不幸的是,这只适用于等宽字体而不适用于旧版浏览器.

Answer 2

虽然我同意 css 主要是为了样式；有使用以下方式“显示”内容的用例：

text-overflow: ellipsis

<div class="myClass">
  My String
</div>

.myClass {
  white-space: nowrap;
  width: 39px;
  overflow: hidden;
  text-overflow: ellipsis;
}

将显示截断的“我的”

小提琴