CSS: Display only the first two letters of a string

Question

Is it possible to display only the first two letters of a string using pure 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)

Is there another way?

Answer 1

Although I agree css is primarily for styling; there are use cases for "displaying" content using:

text-overflow: ellipsis

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

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

Will show truncated "My"

Fiddle

Answer 2

Actually, there is a way to do this in pure css! It uses the ch font-dependent unit.

.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 fonts and not in older browsers.