Wyświetlacz pierwsza litera tylko

Question

Powiedzmy to markup:

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

Co chcę tylko być widoczne pierwsza litera tekstu (w tym przypadku, po prostu T)

(Faktycznie Wygrałem „t skończyć używając go, ale jestem ciekaw tego, na pewno może być pomocny później)

Więc to był mój próba:

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

Udało mi się sprawdzić, czy tego nie osiągnie. Pytanie brzmi: dlaczego? i czy jest trochę pracy wokół tego?

-EDIT-

Szukamy IE = + 7/8 wersja zdolne rozwiązania ..

Salut

Answer 1

Edytuj: Disclaimer: to nie działa zgodnie z komentarzami. Nie używaj go tak, jak jest, bez sprawdzania, czy pasuje on do twoich potrzeb.

Jeśli zaznaczysz specyfikację pseudo-elementu :first-letter, zauważysz następujące:

: first-letter pseudo-element musi wybrać pierwszą literę w pierwszym wierszu bloku , jeśli nie jest poprzedzony żadną inną zawartością (taką jak obrazy lub wbudowane tabele) w jej linii.

Ważnym słowem jest tutaj "blok".

Próbujesz użyć pseudo elementu na tagu <a/> z klasą Twitter. Domyślnie znaczniki zakotwiczenia są elementami śródliniowymi (a nie elementami blokowymi).

Dla danego znaczników, jeden rozwiązanie problemu byłoby styl kotwicy w ten sposób:

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

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

nie jestem pewien dokładnie, co masz zamiar za, ale to jest wystarczająco dobry do celów doświadczalnych . Sprawdź demo tutaj: http://jsfiddle.net/H7jhF/.

Answer 2

Co robisz jest jak ukrywanie elementu nadrzędnego i stara się pokazać jedno z jego dzieci, to nie zadziała, ponieważ styl nadrzędny nadpisuje go. Element nadrzędny musi również być elementem blokowym, aby działał. Podobnie jak znacznik div lub p lub display: block; w znaczniku a.

Oto coś za pomocą koloru:

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

Dlaczego nie wystarczy użyć JavaScript i podzielić ciąg do tablicy i użyć pierwszy element tablicy. Lub charAt()

Answer 4

spróbować czegoś takiego:

.Twitter { 
 
    font-size: 0; 
 
} 
 

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

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

Może nie jest to najlepsze rozwiązanie, ale działa.

Answer 5

Czyste odpowiedzi na CSS używają widoczności i kolorów, aby ukryć pozostałe litery, ale wciąż są obecne i wpływają na układ. Może to spowodować problemy z układem, np. jeśli chcesz unieść element i umieścić coś obok niego.

Znalazłem zabawny sposób na zrobienie tego bez ukrytych elementów. Sztuczka polega na tym, by całe słowo zredukować do prawie niczego, a następnie wysadzić tylko pierwszą literę. To trochę tak, jak próbował OP, ale działa, ponieważ działa na ciągłym widmie, a nie na display: none, które po prostu zamyka wszystko w środku. (Rodzaju analogowy> Sytuacja cyfrowej.)

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; 
} 

Wynik:

Answer 6

strzelać zawartości poza stronę i pokazać ten list za pomocą dynamicznej zawartości:

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

w grę w tym skrzypce:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/

Answer 7

Innym sposobem jest użycie color: transparent

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

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

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

JSFiddle

---

Jednak to nie będzie działać dla LTE IE8.

Referencje:

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

Answer 8

Oto, co zrobić:

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