Texttransformation - CSS-Tricks

Anonim

Die text-transformEigenschaft in CSS steuert die Groß- und Kleinschreibung von Text und die Großschreibung.

.lowercase ( text-transform: lowercase; )

Texttransformationswerte

  • lowercase macht alle Buchstaben im ausgewählten Text klein.
  • uppercase macht alle Buchstaben im ausgewählten Text in Großbuchstaben.
  • capitalize Großschreibung des ersten Buchstabens jedes Wortes im ausgewählten Text.
  • none Belässt die Groß- und Kleinschreibung des Textes genau so, wie er eingegeben wurde.
  • inherit gibt dem Text den Fall und die Großschreibung seines Elternteils.

Die Demo unten zeigt lowercase, uppercaseund capitalizein Gebrauch. Sehen Sie sich die Registerkarte HTML an, um zu sehen, wie der Text ursprünglich geschrieben wurde, und wechseln Sie dann zurück zur Registerkarte Ergebnisse, um ihn nach dem Anwenden des CSS anzuzeigen.

Siehe den Stift 0f4293fce0d14aafc3818c950ab0ded3 von mariemosley (@mariemosley) auf CodePen.

Sehenswürdigkeiten

capitalizeGroßschreibung von Wörtern in einfachen oder doppelten Anführungszeichen und des ersten Buchstabens nach einem Bindestrich. Der erste Buchstabe nach einer Zahl wird nicht großgeschrieben, sodass Daten wie „4. Februar 2015“ nicht in „4. Februar 2015“ umgewandelt werden.

capitalizebetrifft nur die ersten Buchstaben von Wörtern. Der Fall der restlichen Buchstaben in einem Wort wird dadurch nicht geändert. Wenn Sie beispielsweise capitalizeein Wort verwenden, das bereits in Großbuchstaben geschrieben ist, werden die anderen Buchstaben des Wortes nicht in Kleinbuchstaben umgewandelt. Dies ist hilfreich, wenn Ihr Text ein Akronym oder eine Abkürzung enthält, die keine Kleinbuchstaben enthalten sollte.

CSS kann keine Groß- und Kleinschreibung ausführen, die in Titeln von Büchern, Filmen, Liedern und Gedichten verwendet wird, bei denen Artikel in Kleinbuchstaben geschrieben sind (wie in „Raiders of the Lost Ark“). Es gibt jedoch JavaScript-Lösungen für die Groß- und Kleinschreibung, einschließlich David Gouchs toTitleCase ().

Mehr Informationen

  • Texttransformation bei MDN
  • Texttransformation in der W3C-Spezifikation
  • Hinweise zur Zugänglichkeit von Großbuchstaben aus WebAIM

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein Irgendein Irgendein Irgendein Irgendein Irgendein Irgendein

Firefox unterstützt sprachspezifische Großschreibregeln für türkische Sprachen, Deutsch, Niederländisch und Griechisch, die von anderen Browsern nicht unterstützt werden. Firefox ist auch der einzige Browser, der dies unterstützt text-transform: full-width;. Dies kann dazu beitragen, die Lesbarkeit von Text zu verbessern, der eine Mischung aus lateinamerikanischen und ostasiatischen Skripten enthält. Siehe Details bei MDN.