26
È possibile nascondere tutte le lettere dopo la prima lettera con CSS?Nascondi tutto il testo tranne la prima lettera con CSS?
dt:not(::first-letter) {
display: none;
}
A
risposta
19
È possibile, ma il CSS è sbagliato. La versione seguente funziona (almeno in Chrome). Rende invisibile lo dt e definisce un overrule per la prima lettera per renderlo nuovamente visibile.
Ho provato lo stesso con display troppo, ma non funziona, come previsto. visibility: hidden nasconde il contenuto, ma mantiene l'elemento al suo posto, mentre display: none lo rimuove dal flusso e rende impossibile la visualizzazione di elementi secondari (la prima lettera in questo caso).
Ho aggiunto anche un passaggio del mouse, quindi puoi passare la lettera per vedere il resto del 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>Un effetto collaterale sarà che l'area coperta dalla testo è ancora rivendicato. Forse non è un problema, ma se è necessario avrai qualche altra soluzione. Una possibilità è di creare anche la dimensione del font dt0. In questo modo, il testo è così piccolo che non rivendica spazio. Non aiuta se contiene anche immagini, ovviamente.
Poiché non sembra funzionare, ecco l'alternativa utilizzando la dimensione del carattere. Meno che ideale, ma speriamo che risolva ancora il tuo problema.
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>
-1
Prova questo ....
.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>
11
Penso che si c un provate questo:
.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>Vedi anche questo fiddle
5
Non è possibile utilizzare :not con selettore pseudo elemento (vedi this).
Ciò che si può fare è pensare in un altro modo: rendere trasparente il tutto, quindi colorare con ::first-letter. Poiché quest'ultimo ha una specificità superiore, sostituirà l'impostazione trasparente, ottenendo così il risultato desiderato.
2
Un'alternativa basata sulla risposta di Waruna, utilizzando color invece di attributi basati su layout. Il vantaggio principale è che funziona su tutti i browser che ho testato (Firefox, Chrome e M $ Edge, ma probabilmente dovrebbe funzionare su tutti i browser), e non causa alcun problema visivo (come la "linea di base che salta un pixel" dalla seconda soluzione della risposta accettata), poiché utilizza un attributo completamente visivo.
Il problema con il CSS originale è che non è possibile utilizzare gli pseudo-elementi (::blah) all'interno di :not. Bisogna espanderlo nella logica inversa in modo non è necessario il :not
dt {
color: transparent;
}
dt::first-letter {
color: black;
}
/* For testing */
dt:hover {
color: black;
}<dt>Hello World!</dt>+1
Abbiamo davvero bisogno di un'altra risposta per ogni possibile modo di rendere il testo invisibile in css? Al massimo questo dovrebbe essere un commento sulla risposta accettata. "Una terza opzione è usare' color: transparent' per nascondere e 'color: black' per mostrare" – alexanderbird
+0
@alexanderbird Funziona su tutti i browser senza problemi di visualizzazione, a differenza delle soluzioni accettate. – Kroltan
+1
Ah! Lo aggiungeresti alla tua risposta? Quando l'ho letto mi chiedevo "cosa fa questo che gli altri non fanno?" – alexanderbird
Non sembra di lavorare su Firefox. Persino l'hovering non rivela nulla. – Bakuriu
Infatti. Su FF l'intero testo è invisibile, anche la prima lettera. Ciò non dovrebbe accadere, poiché dovrebbe essere permesso di rendere invisibile un elemento rendendo visibili parti del suo contenuto. Mi sembra un insetto. Tuttavia, in alternativa, potresti considerare di non nascondere il testo, ma renderlo trasparente o settare il font-side a 0. – GolezTrol
@Paulie_D 'dt' dovrebbe essere un blocco, ma anche se aggiungo' display: block' ad esso, non aiuta – GolezTrol