Wie kann ich in CSS nur den ersten Buchstaben eines Wortes groß schreiben und gleichzeitig den Text in Großbuchstaben beibehalten?

CSS-Texttransformation: Großschreibung in Großbuchstaben

In diesem Szenario wird die Eigenschaft „Texttransformation: Großschreibung“ auf Elemente mit Groß- oder Kleinbuchstaben angewendet Kleingeschriebener Text führt zur gewünschten Großschreibung für kleingeschriebene Wörter. Das Problem tritt jedoch bei Texten auf, die nur in Großbuchstaben geschrieben sind und bei denen das gewünschte Ergebnis darin besteht, die Großschreibung beizubehalten.

Um dieser Herausforderung zu begegnen, kann eine CSS-Lösung implementiert werden, die eine Kombination aus Texttransformation: Kleinbuchstaben und Text verwendet -transform: Großbuchstaben-Eigenschaften, zusammen mit den Pseudoklassen :first-letter und :first-line.

Hier ist die Aktualisierung CSS:

.link {
  text-transform: lowercase;
}
.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

Diese Kombination wandelt den gesamten Text in Kleinbuchstaben um und behält dabei die Großschreibung des Anfangsbuchstabens bei. Durch Anwenden dieses Stils auf die a-Elemente im bereitgestellten HTML können Sie die gewünschte Ausgabe von Folgendem erzielen:

Small Caps & All Caps

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS nur den ersten Buchstaben eines Wortes groß schreiben und gleichzeitig den Text in Großbuchstaben beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!