display prima lettera solo

Question

Diciamo questo markup:

<div id="socialMedia"> 
    <a class="Twitter">Twitter</a> 
</div> 

quello che voglio è solo per essere visibile la prima lettera del testo (in questo caso, solo un T)

(in realtà ho vinto 't finiscono per usarlo, ma io sono curioso di questo; sicuramente può essere utile in seguito)

Quindi questo è stato il mio tentativo:

#socialMedia .Twitter{ 
    display:none; 
} 
#socialMedia .Twitter:first-letter { 
    display: block !important; 
} 

Sono stato in grado di verificare che non lo raggiungerà. La domanda è: perché? e c'è qualche soluzione?

operativa -Editazione-

Siamo alla ricerca di soluzioni in grado IE = + versione 7/8 ..

Salut

Answer 1

Modifica: Disclaimer: questo non funziona in base ai commenti. Si prega di non utilizzare così com'è senza averlo verificato per le proprie esigenze.

Se si controlla la specifica per lo pseudo-elemento :first-letter, si noterà il seguente:

L': first-letter pseudo-elemento necessario selezionare la prima lettera della prima riga di un blocco , se non è preceduto da nessun altro contenuto (come immagini o tabelle in linea) sulla sua linea.

La parola importante qui è "blocco".

Si sta tentando di utilizzare lo pseudoelemento su un tag <a/> con classe Twitter. Per impostazione predefinita, i tag di ancoraggio sono elementi in linea (non elementi a livello di blocco).

Per la vostra data di marcatura, una soluzione al vostro problema sarebbe per lo stile l'ancora in questo modo:

.Twitter { 
    display:block; 
    visibility:hidden; 
} 

.Twitter:first-letter { 
    visibility:visible; 
}​ 

io non sono sicuro di quello che si sta andando per, ma che è abbastanza buono per fini sperimentali . Guarda qui una demo: http://jsfiddle.net/H7jhF/.

Answer 2

Quello che stai facendo è come nascondere un elemento genitore e cercando di mostrare uno dei suoi figli, non funzionerà perché lo stile del genitore lo sostituisce. Anche l'elemento genitore deve essere un elemento a livello di blocco perché funzioni. Come un tag div o p o display: block; sul tag a.

ecco qualcosa usando il colore:

HTML

<div id="socialMedia"> 
    <a class="Twitter">Twitter</a> 
</div> 

CSS

body { 
    background-color:#FFF; 
} 
.Twitter{ 
    display: block; 
    color:#FFF; 
} 
.Twitter:first-letter { 
    color:#000; 
} 

Answer 3

Perché non basta usare JavaScript e dividere la stringa in un array e utilizzare il primo elemento dell'array. O charAt()

Answer 4

provare qualcosa di simile:

.Twitter { 
 
    font-size: 0; 
 
} 
 

 
.Twitter:first-letter { 
 
    font-size: 12px; 
 
}

<div class="Twitter">Twitter</div>

Forse questa non è la soluzione migliore, ma funziona.

Answer 5

Le risposte puramente CSS utilizzano visibilità e trucchi dei colori per nascondere le lettere rimanenti, ma sono ancora presenti e influenzano il layout. Potrebbe causare problemi di layout, ad es. se desideri far galleggiare l'elemento e mettere qualcosa al suo fianco.

Ho trovato un modo divertente per farlo senza elementi nascosti. Il trucco consiste nel ridurre quasi completamente l'intera parola e poi far esplodere solo la prima lettera. È un po 'come se OP cercasse di fare, ma funziona perché funziona su uno spettro continuo piuttosto che su display: none che spegne tutto ciò che è al suo interno. (Tipo di un analogo> situazione digitale.)

Demo

HTML:

<div>Ding Dong</div> and other stuff 

CSS:

div { 
    font-size: 0.0000016px; 
    float: left; 
} 

div::first-letter { 
    color: red; 
    font-size: 10000000em; 
} 

Risultato:

Answer 6

sparare il contenuto fuori dalla pagina e mostrare la lettera con contenuti dinamici:

.twitter{ 
    text-indent:-9999px; 
    display:block; 
    position:relative; 
} 
.twitter:before,.twitter::before{ 
    content:"T"; 
    position:absolute; 
    width:10px; 
    height:15px; 
    z-index:100; 
    text-indent:9999px; 
} 

in gioco in questo violino:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/

Answer 7

Un altro modo è quello di utilizzare color: transparent

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

 
.twitter:first-letter{ 
 
    color: #000; 
 
}

<div id="socialMedia"> 
 
    <a class="twitter">Twitter</a> 
 
</div>

JSFiddle

---

Tuttavia, questo non funzionerà per lte IE8.

Riferimenti:

• IE7 IE8 IE9 color:transparent property
• color: transparent is not working in Internet Explorer

Answer 8

Ecco quello che faccio:

.Twitter{ 
     display:block; 
     width:1ch; 
     overflow:hidden; 
     white-space: nowrap; 
    }