Wie kann ich „text-transform: Capitalize' verwenden, ohne dass sich dies auf Wörter auswirkt, die nur in Großbuchstaben geschrieben sind?

CSS-Texttransformation überschreiben: Großschreibung für Text in Großbuchstaben

Problem:

Verwendung der CSS-Texttransformation: Großschreibung ; Die Regel zum Konvertieren von Text in Großbuchstaben in die Groß-/Kleinschreibung von Sätzen ist problematisch, wenn die Anfangsbuchstaben solcher Wörter von Natur aus Großbuchstaben erfordern, wie z. B. Eigennamen oder Akronyme.

Wie im folgenden Codeausschnitt gezeigt, ist die gewünschte Ausgabe von „Small Caps & All Caps“ wird nicht erreicht:

HTML:

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

CSS:

.link {text-transform: capitalize;}

Ergebnis:

Small Caps & ALL CAPS

Lösung:

Um das gewünschte Großschreibungsverhalten zu erreichen und gleichzeitig die Texttransformation beizubehalten: Großschreibung; Regel kann das folgende CSS implementiert werden:

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

Diese Modifikation wandelt den gesamten Text zunächst in Kleinbuchstaben um und schreibt dann den ersten Buchstaben jedes Wortes und die erste Textzeile wieder in Großbuchstaben.

Ergebnis:

Small Caps
All Caps

Das obige ist der detaillierte Inhalt vonWie kann ich „text-transform: Capitalize' verwenden, ohne dass sich dies auf Wörter auswirkt, die nur in Großbuchstaben geschrieben sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!