Verstecken Sie den gesamten Text bis auf den ersten Buchstaben mit CSS?

Question

Ist es möglich, alle Buchstaben nach dem ersten Buchstaben mit CSS zu verstecken?

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

Answer 1

Sie können, aber Ihre CSS ist falsch. Die folgende Version funktioniert (zumindest in Chrome). Es macht die dt unsichtbar und definiert eine Überschreibung für den ersten Buchstaben, um es wieder sichtbar zu machen.

habe ich versucht, das gleiche mit display auch, aber das funktioniert nicht, wie erwartet. visibility: hidden blendet den Inhalt aus, behält das Element jedoch bei, während es aus dem Fluss entfernt und es unmöglich macht, dass Unterelemente (der erste Buchstabe in diesem Fall) wieder sichtbar werden.

Ich habe auch eine schweben, so dass Sie den Brief schweben können den Rest der dt zu sehen.

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>

Ein Nebeneffekt wird sein, dass der Bereich, der durch den Text bedeckt ist, wird behauptet, still. Vielleicht ist das kein Problem, aber wenn Sie es brauchen, brauchen Sie eine andere Lösung. Eine Möglichkeit ist es, die Schriftgröße des dt0 auch zu machen. So ist der Text so klein, dass kein Platz beansprucht wird. Wird nicht helfen, wenn es natürlich auch Bilder enthält.

Da es scheint nicht zu funktionieren, hier ist die Alternative mit Schriftgröße. Weniger als ideal, aber hoffentlich wird es dein Problem noch lösen.

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

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>

Answer 3

ich glaube, Sie c ein versuchen Sie dies:

.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>

Siehe auch dieses fiddle

Answer 4

Sie nicht :not mit Pseudo Elementselektoreinrichtung (siehe this) verwenden können.

Was können Sie tun, ist in einer anderen Art und Weise zu denken: das Ganze transparent-ize, dann Farbe mit ::first-letter. Da Letzteres eine höhere Spezifität aufweist, überschreibt es die transparente Einstellung und erzielt somit das gewünschte Ergebnis.

Answer 5

Eine Alternative basierend auf Waruna Antwort, mit color statt Layout-basierten Attribute. Der Hauptvorteil ist, dass es mit jedem Browser funktioniert, den ich getestet habe (Firefox, Chrome und M $ Edge, sollte aber wahrscheinlich in allen Browsern funktionieren) und es verursacht keine visuellen Störungen (wie die "Grundlinie springt ein Pixel" von der zweiten Lösung) der akzeptierten Antwort), da es ein vollständig visuelles Attribut verwendet.

Das Problem mit Ihrem ursprünglichen CSS ist, dass Sie keine Pseudo-Elemente (::blah) in :not verwenden können. Sie haben es in die umgekehrte Logik zu erweitern, so dass Sie die :not

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

 
/* For testing */ 
 
dt:hover { 
 
    color: black; 
 
}

<dt>Hello World!</dt>