Wie kann ich in CSS nur den ersten Buchstaben jedes Wortes großschreiben und gleichzeitig alle vorhandenen Großbuchstaben beibehalten?

CSS-Texttransformation: Großschreibung des All-Caps-Dilemmas

Die Texttransformationseigenschaft in CSS steuert die Großschreibung von Text. Bei der Einstellung „Großschreibung“ wird der erste Buchstabe jedes Wortes großgeschrieben. Dies stellt jedoch eine Herausforderung dar, wenn es um Wörter geht, die bereits in Großbuchstaben geschrieben sind.

Das Problem

Im bereitgestellten HTML- und CSS-Snippet:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

.link {
  text-transform: capitalize;
}

Die Ausgabe ist „Kapitälchen und Großbuchstaben“, während die gewünschte Ausgabe „Kapitälchen und Großbuchstaben“ ist.

Lösung

Um das gewünschte Ergebnis zu erzielen, kann eine Kombination von CSS-Regeln verwendet werden:

.link {
  text-transform: lowercase;
}

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

• Die Regel text-transform: Lowercase wandelt den gesamten Text in „.link“-Elementen in Kleinbuchstaben um.
• Die auf die Pseudoelemente :first-letter und :first-line angewendete Texttransformation: Großbuchstabenregel schreibt den ersten Buchstaben bzw. die erste Zeile jedes Elements groß.

Dieser Ansatz stellt dies sicher Wörter, die bereits in Großbuchstaben geschrieben sind (z. B. „ALL CAPS“), bleiben erhalten, während der erste Buchstabe der anderen Wörter weiterhin großgeschrieben wird. Die resultierende Ausgabe lautet:

Small Caps 
All Caps

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