CODEWITHSUNDEEP
csscss-selectors
Evanss
Evanss

Reputation: 23593

Hide all text except for the first letter with CSS?

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

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

Upvotes: 27

Views: 13427

Answers (6)

Sir Von Berker
Sir Von Berker

Reputation: 390

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 :)

Upvotes: 0

Waruna Manjula
Waruna Manjula

Reputation: 3487

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>

Upvotes: -1

Kroltan
Kroltan

Reputation: 5156

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>

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116110

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>

Upvotes: 24

Jainam
Jainam

Reputation: 2660

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

Upvotes: 11

dz902
dz902

Reputation: 5828

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.

Upvotes: 5

Related Questions