CSS: Der erste Buchstabe funktioniert nicht

76

Ich versuche, CSS-Stile auf einige HTML-Snippets anzuwenden, die aus einem Microsoft Word-Dokument generiert wurden. Der von Word generierte HTML-Code ist ziemlich grausam und enthält viele Inline-Stile. Es geht ungefähr so:

<html>
    <head></head>
    <body>
        <center>
            <p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span
               style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p>

            <p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span
                style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p>
    </body>
</html>

... und ganz einfach möchte ich den ersten Buchstaben des Titelabschnitts stylen. Es muss nur größer und in einer anderen Schriftart sein. Um dies zu tun, versuche ich, den :first-letterSelektor zu verwenden, mit einer Art von:

p b span:first-letter {
    font-size: 500px !important;
}

Aber es scheint nicht zu funktionieren. Hier ist eine Geige, die dies demonstriert:

http://jsfiddle.net/KvGr2/

Irgendwelche Ideen, was falsch ist / wie man den ersten Buchstaben des Titelabschnitts richtig gestaltet? Ich kann geringfügige Änderungen am Markup vornehmen (z. B. das Hinzufügen eines Wrapper-Divs um Dinge), allerdings nicht ohne Schwierigkeiten.

html css Aroth
quelle

Antworten:

198

::first-letterfunktioniert nicht bei Inline- Elementen wie a span. ::first-letterFunktioniert mit Blockelementen wie einem Absatz, einer Tabellenbeschriftung, einer Tabellenzelle, einem Listenelement oder solchen, deren displayEigenschaft auf festgelegt ist inline-block.

Daher ist es besser, sich ::first-letterauf a panstatt auf a zu bewerben span.

p::first-letter {font-size: 500px;}

oder wenn Sie einen ::first-letterSelektor in einem haben möchten, spanschreiben Sie ihn wie folgt:

p b span::first-letter {font-size: 500px !important;}
span {display:block}

MDN liefert die Begründung für dieses nicht offensichtliche Verhalten:

Das ::first-letterCSS-Pseudoelement wählt den ersten Buchstaben der ersten Zeile eines Blocks aus, wenn ihm in seiner Zeile kein anderer Inhalt (z. B. Bilder oder Inline-Tabellen) vorangestellt ist.

...

Eine erste Zeile hat nur Sinn in einem block Behälterbox daher das ::first-letterpseudo-Element hat nur eine Wirkung auf den Elementen mit einem displayWert von block, inline-block, table-cell, list-itemoder table-caption. In allen anderen Fällen ::first-letterhat keine Wirkung.

Ein weiterer seltsamer Fall (abgesehen von nicht auf Inline - Elementen in Betrieb) ist , wenn Sie verwenden :beforedas :first-letterwird auf die vorher nicht den tatsächlichen ersten Buchstaben gelten siehe codepen

Beispiele

Verweise

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter

Sandeep
quelle
Danke dafür. Eine seltsame Sache, die mir aufgefallen ist - die Größe des% -Zeichens wird ebenfalls geändert? jsfiddle.net/iamkeir/KvGr2/76
iamkeir
2
+1 Danke, dass du mir mehr Ärger erspart hast. Ich muss denken, dass es ziemlich üblich ist, ein spanElement verwenden zu wollen , deshalb bin ich überrascht, dass es nicht funktioniert.
Yuck
14

Sie können das beabsichtigte Verhalten erhalten, indem Sie die Anzeigeeigenschaft des Bereichs auf Inline-Block setzen:

.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}
<div class="heading">
  <span>An</span>
  <span>Interesting</span>
  <span>Heading</span>
</div>
Erweitern Sie das Snippet

Dovev Hefetz
quelle
wie es geht, wenn mein Text mit Symbolen beginnt. <div>! Sitzung abgelaufen </ div>
gauti
8

Dies liegt daran, dass :first-letternur Block- / Inline-Block-Elemente verarbeitet werden. SPANist ein Inline-Element.

Entnommen aus http://reference.sitepoint.com/css/pseudoelement-firstletter :

Das Pseudoelement aus dem ersten Buchstaben wird hauptsächlich zum Erstellen gängiger typografischer Effekte wie Drop Caps verwendet. Dieses Pseudoelement repräsentiert das erste Zeichen der ersten formatierten Textzeile in einem Element auf Blockebene, einem Inline-Block, einer Tabellenbeschriftung, einer Tabellenzelle oder einem Listenelement.

Ofer Zelig
quelle