Erstlinientherapie Pseudoelement funktioniert nicht für p-Element

Question

p::first-line { 
 
    text-transform: uppercase; 
 
} 
 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Wie Sie sehen können, die erste Zeile wird in Groß nicht umgesetzt worden. Was mache ich falsch?

Ich verwende OS X 10.11.6 und Safari 9.1.2 (11601.7.7).

Answer 1

Ihr Pseudo-Element funktioniert gut. Das Problem, mit dem Sie konfrontiert werden, ist ein bekannter, mehr als 10 Jahre alter, ungelöster Fehler in der Webkit Engine, der nicht akzeptiert text-transform.

Dieser spezielle Fehler wurde mehrmals gemeldet, aber es scheint, dass es überhaupt keine Lösung gibt. Schauen Sie sich drei der Berichte, die ich gefunden:

• https://bugs.chromium.org/p/chromium/issues/detail?id=142827

• https://bugs.chromium.org/p/chromium/issues/detail?id=129669

• https://bugs.webkit.org/show_bug.cgi?id=3409

p::first-line { 
 
    color: red; 
 
} 
 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

---

Für die Aufzeichnung werden die Eigenschaften ::first-line akzeptiert sind:

• Schrifteigenschaften
• Farbeigenschaften
• Hintergrund Eigenschaften
• Wortabstand
• Zeichenabstand
• text-decoration
• vertical-align
• text-trans
• line-height
• klar

Sie können mehr über ::first-line in this page finden.

---

Hinweis: Bug 129669 auf Chromium ist seit dem 26. September ^th 2017.

Answer 2

behoben Sie können die Eigenschaften sehen, die mit ::first-linehere von der Nutzung ausgeschlossen werden.Unter ihnen sind

.element::first-line { 
    font-style: ... 
    font-variant: ... 
    font-weight: ... 
    font-size: ... 
    font-family: ... 

    line-height: ... 
    color: ... 
    word-spacing: ... 
    letter-spacing: ... 
    text-decoration: ... 
    **text-transform: ...** 

    background-color: ... 
    background-image: ... 
    background-position: ... 
    background-repeat: ... 
    background-size: ... 
    background-attachment: ... 
} 

Answer 3

Offenbar ::first-line und text-transform Kombination nicht in Webkit-Browsern funktioniert. In Firefox funktioniert dein Code einwandfrei. Überprüfen Sie this bug.