CSS/Eigenschaften/Textformatierung/text-transform

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft text-transform können Sie in einem Textbereich Kleinbuchstaben, Großbuchstaben oder die Großschreibung des jeweils ersten Buchstaben erzwingen, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text-transform</title>
    <style>
      h2, .uppercase { text-transform: uppercase; }
      .lowercase     { text-transform: lowercase; }
      .capitalize    { text-transform: capitalize; }
      .none          { text-transform: none; }
    </style>
  </head>
  <body>
    <h2>Texte transformieren</h2>
    <p>Obwohl dieser Text in der richtigen Schreibweise im
      Quelltext steht, werden die Buchstaben dennoch anders
      dargestellt.
    </p>
    <ul>
      <li class="uppercase">... nur Großbuchstaben</li>
      <li class="lowercase">... nur Kleinbuchstaben</li>
      <li class="capitalize">... Die jeweils ersten Buchstaben werden als MAJUSKEL
        dargestellt, alle anderen werden nicht verändert
      </li>
      <li class="none">... keine Text-Transformation</li>
    </ul>
  </body>
</html>

Mit text-transform können Sie die Buchstaben eines Textes verändern. Folgende Angaben sind möglich:

  • capitalize, Wortanfänge als Großbuchstaben, alle anderen Buchstaben werden nicht verändert
  • uppercase, nur Großbuchstaben
  • lowercase, nur Kleinbuchstaben
  • none, keine Text-Transformation
  • inherit, Text-Transformation des Elternelements
Beachten Sie: Eine für ein Element festgelegte Text-Transformation wird ohne Ihr Zutun an die Kindelemente vererbt.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML