2015-06-08 7 views
5

Próbuję użyć: pseudo-selektora pierwszej linii, ale wygląda na to, że nie działa i nie mogę zrozumieć dlaczego. Próbowałem również używać :: first-line, ale bez skutku. (Uwaga: nie ma to nic wspólnego z promieniem obramowania).p.class: first-line nie działa

p.intro:first-line { 
 
    text-transform: uppercase; 
 
}
<p class="intro">Instead of attempting to cover the full range of <abbr title="Cascading Style Sheets">CSS</abbr> selectors, I think it makes sense to begin with a subset of the most widely supported. The <a href="http://www.quirksmode.org/css/contents.html">compatibility charts compiled by Peter-Paul Koch</a> provide 
 
    detailed support information.</p>

+2

Wygląda na to, że nie powinno działać? http://jsfiddle.net/9wrubwc2/ – Patrick

+0

@Anonymous W rzeczywistości istnieje przykład w MDN za pomocą 'text-transform: uppercase' ... –

+0

@ DenysSéguret Masz rację, moje złe. Sądzę, że przeczytałem część "Właściwości koloru, wszystkie właściwości związane z tłem" i założyłem, że transformacja tekstu nie została uwzględniona. – Anonymous

Odpowiedz

5

widzę tylko ten problem w Chrome. Najwyraźniej nie jest to błąd, który nie został jeszcze ustalony: https://code.google.com/p/chromium/issues/detail?id=129669

Istnieje obejście proponuje w tym SO post który mówi, można użyć https://github.com/octopi/Linify aby uzyskać efekt przy użyciu jQuery plugin. Zasadniczo, użyj linify, aby wybrać pierwszą linię, a następnie zastosować właściwość text-transform: uppercase do pierwszej linii.

+0

Próbowałem również w Operze i Safari (na komputerze Mac). Nie działa. Działa w Firefoksie. Błąd Webkita? – Steven

+0

@Steven Wszystkie z nich używają tego samego silnika sieciowego (webkit, miganie), dlatego mają ten sam błąd. Spróbuj Firefox lub IE zamiast tego –

+0

@steven Uruchomiłem fragment na najnowszej wersji Firefoksa (Win 7) i działa zgodnie z oczekiwaniami. –