Warum funktioniert „text-transform: Capitalize' nicht bei Text in Großbuchstaben?

CSS-Texttransformation: Großschreibung funktioniert nicht bei Großbuchstaben

In diesem Szenario besteht das Ziel darin, den ersten Buchstaben jedes Wortes groß zu schreiben im Text, wenn der Text in Großbuchstaben geschrieben ist. Die Anwendung von text-transform: captialize; auf die HTML-Elemente erzielt nicht den gewünschten Effekt der Großschreibung des ersten Buchstabens jedes Wortes im Großbuchstaben.

Um dieses Problem zu beheben, kann ein leicht modifizierter CSS-Ansatz übernommen werden:

.link {
  text-transform: lowercase;
}

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

Dieser CSS-Code verwendet die folgenden Techniken:

• text-transform: Lowercase;: Konvertiert den gesamten Text innerhalb der .link-Elemente in Kleinbuchstaben umwandeln.
• text-transform: Uppercase; Wird auf :first-letter und :first-line angewendet, wird der erste Buchstabe jedes Wortes bzw. die erste Zeile des Textes selektiv großgeschrieben.

Durch die Anwendung dieser Stile wird die gewünschte Ausgabe erreicht:

Small Caps
All Caps

Das obige ist der detaillierte Inhalt vonWarum funktioniert „text-transform: Capitalize' nicht bei Text in Großbuchstaben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!