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?

You have to add spans per character to get per character control in CSS — Joseph Young, Feb 10 '16 at 23:30
@David: CSS is designed for display purposes. Therefore there should be a way to hide hide letters (without changing the document)? Furthermore CSS 3 added a lot of features to change documents e.g. with :after / :before — Blackbam, Feb 10 '16 at 23:30
@Joseph: Can not control the HTML output here. This is why I am searching for a solution. — Blackbam, Feb 10 '16 at 23:31
@Joseph yes but this applies as soon as the document is ready - I would prefer a CSS only solution if there is any way. — Blackbam, Feb 10 '16 at 23:33
@Blackbam I don't think there is a way to do it with any standard current CSS. The next best thing is something like http://letteringjs.com/ — Joseph Young, Feb 10 '16 at 23:43

score 45 · Accepted Answer · answered Feb 10 '16 at 23:52

45

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.

answered Feb 10 '16 at 23:52

fl0cke

2,804
1
16
25

Nice solution I will accept if there is no solution for non-monospace fonts. – Blackbam Feb 11 '16 at 00:57
It didn't quite work for me - probably because of an accumulation of other CSS getting in the way – David Brossard May 27 '19 at 15:59
Seems to require display:block; – MarcGuay Aug 25 '22 at 20:15

Fergus · Answer 2 · 2017-12-13T21:39:24.260

5

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

edited Dec 13 '17 at 21:39

answered Feb 10 '16 at 23:51

Fergus

2,821
2
27
41

score 2 · Answer 3 · answered Dec 14 '19 at 19:41

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

Hope this helps anyone.

score 1 · Answer 4 · answered Feb 10 '16 at 23:46

Like you said, you can do it using nth-of-everything but it requires additional 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/

For multiple letters you have to mix with html, for example :

<p><span class='show'>He</span>llo</p>

And apply the visible state to class "show".

CSS: Display only the first two letters of a string

4 Answers4

Linked