27

Is it possible to hide all letters after the first letter with CSS?

dt:not(::first-letter) {
  display: none;
}
0

6 Answers 6

24

You can, but your CSS is wrong. The version below works (at least in Chrome). It makes the dt invisible, and defines an overrule for the first letter to make it visible again.

I tried the same with display too, but that doesn't work, as expected. visibility: hidden hides the content, but keeps the element in place, while display: none removes it from the flow, and makes it impossible for sub-elements (the first letter in this case) to become visible again.

I added a hover too, so you can hover the letter to see the rest of the dt.

dt {
  visibility: hidden;
}
dt::first-letter {
  visibility: visible;
}

/* Hover the first letter to see the rest */
dt:hover {
  visibility: visible;
}
Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>

A side effect will be that the area that is covered by the text is still claimed. Maybe that is not an issue, but if it is you will need some other solution. One possibility is to make the font-size of the dt 0 too. That way, the text is so small that is claims no space. Won't help if it also contains images, of course.

Since it doesn't seem to work, here is the alternative using font-size. Less than ideal, but hopefully it will still solve your problem.

dt {
  font-size: 0;
}
dt::first-letter {
  font-size: 1rem;
}

/* Hover the first letter to see the rest */
dt:hover {
  font-size: 1em;
}
Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>

6
  • 12
    Doesn't seem to work on Firefox. Even hovering doesn't reveal anything.
    – Bakuriu
    Commented Apr 25, 2016 at 10:03
  • Indeed. On FF the whole text is invisible, even the first letter. That shouldn't happen, since it should be allowed to make an element invisible while making parts of its content visible. Feels to me like a bug. However, as an alternative, you might consider not hiding the text, but making it transparent or settings the font-side to 0.
    – GolezTrol
    Commented Apr 25, 2016 at 10:11
  • @Paulie_D dt should be block, but even if I add display: block to it, it doesn't help.
    – GolezTrol
    Commented Apr 25, 2016 at 10:14
  • Interesting, the second snippet worked on Firefox (though there's a ~1px movement of the baselineon hover) until I went to fix your rem typo, at which point the behaviour was the same as the first.
    – OrangeDog
    Commented Apr 25, 2016 at 11:34
  • 2
    @OrangeDog rem is not a typo. It's root-em. You have to specify a font size for the first letter, since it can't use the 0 of the dt. I used rem, which is the base em-size for the document, but you could also use some px value. If you use em, it's relative to the font-size of the dt element. Since that font-size is 0, 1em is also 0, and therefore the letter doesn't show up. That's why this solution is not ideal: you have to set some fixed font size here. There is no way to my knowledge to just use the 'original' size.
    – GolezTrol
    Commented Apr 25, 2016 at 12:35
11

I think you can try this:

.twitter{
      display: block;
      color: transparent;
    }

    .twitter:first-letter{
      color: #000;
    }
 <div id="socialMedia">
    <a class="twitter">Twitter</a>
</div>
<div id="socialMedia">
    <a class="twitter">Google</a>
</div>

See also this fiddle

2
  • Well, I partially take it back: Looks good and working in the JSFiddle, but not in the Stack Snippet. Will file a bug report later today.
    – Kroltan
    Commented Apr 26, 2016 at 10:05
  • please Check the fiddle link
    – Jainam
    Commented Apr 26, 2016 at 10:06
5

You cannot use :not with pseudo element selector (see this).

What you can do is thinking in another way: transparent-ize the whole thing, then color with ::first-letter. Because the latter has higher specificity, it will override the transparent setting, thus achieve the result you want.

3

An alternative based on Waruna's answer, using color instead of layout-based attributes. Main advantage is that it works on every browser I tested (Firefox, Chrome and M$ Edge, but should probably work on all browsers), and it does not cause any visual glitches (like the "baseline jumping a pixel" from the second solution of the accepted answer), since it uses a completely visual attribute.

The issue with your original CSS is that you cannot use pseudo-elements (::blah) inside :not. You have to expand it into the inverse logic so you do not need the :not

dt {
  color: transparent;
}
dt::first-letter {
  color: black;
}

/* For testing */
dt:hover {
  color: black;
}
<dt>Hello World!</dt>

7
  • 1
    Do we really need another answer for every possible way to make text invisible in css? At most this should be a comment on the accepted answer. "A third option is to use color: transparent to hide and color: black to show" Commented Apr 25, 2016 at 19:07
  • 1
    Ah! Would you add that to your answer? When I read it I was asking myself "what does this do that the others don't?" Commented Apr 26, 2016 at 4:02
  • 1
    @alexanderbird Sure, added a couple phrases on that.
    – Kroltan
    Commented Apr 26, 2016 at 9:56
  • 1
    Then again, a possible disadvantage here is that you can still select the text, although I admit that is probably less an issue than the jumpiness of my answer.
    – GolezTrol
    Commented Apr 29, 2016 at 13:53
  • 1
    @GolezTrol a bit late, but user-select: none can be used if you want that behaviour
    – Kroltan
    Commented Jun 3, 2019 at 22:55
0

a bit late to the party but i found this solutuùion that may help someone

width: 1ch;
overflow: hidden;

It may not work for every font but it should. It is perfect for monospace as ch is the size of the O letter in a font, so if your first two letters are shorter than O it will work fine, otherwise you may have to tweak it a bit.

Change the ch and you can have the first 2, 3, 4 .... letters :)

-1

Try this....

.newline1::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}
.newline2::first-letter {
  /*color: transparent;*/
font-size: 0px;
}
<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>

.newline1::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}
.newline2::first-letter {
  color: transparent;
}
<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>

2
  • 4
    How does this answer the question? The problem is not hiding the first letter, but hiding the rest of the letters...
    – Bakuriu
    Commented Apr 25, 2016 at 10:05
  • This is answering a completely different question to the one being asked. I should probably downvote this answer.
    – wizzwizz4
    Commented Sep 10, 2016 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.