Question

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

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

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

基于Waruna答案的替代方案，使用color代替基于布局的属性。主要优点是它可以在我测试的每个浏览器上运行（Firefox，Chrome和M $ Edge，但应该适用于所有浏览器），并且它不会引起任何视觉故障（例如＆＃34;基线跳跃像素＆＃34 ;从接受的答案的第二个解决方案），因为它使用完全视觉属性。

原始CSS的问题在于您无法在::blah内使用伪元素（:not）。您必须将其扩展为反逻辑，因此您不需要:not

＆＃13;

dt {
  color: transparent;
}
dt::first-letter {
  color: black;
}

/* For testing */
dt:hover {
  color: black;
}

＆＃13;

<dt>Hello World!</dt>

＆＃13;

Answer 5

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>

Hide all text except for the first letter with CSS?

5 个答案: