CSS-Eigenschaft initial-letter

Die Eigenschaft initial-letter gibt den ersten Buchstaben und die Anzahl der besetzten Zeilen an.

Diese Eigenschaft erscheint in Zeitungen, in denen der erste Buchstabe größer ist als der Rest des Inhalts.

Diese Eigenschaft hat drei Werte: normal, <number>, <integer>.

Negative Werte sind nicht erlaubt.
Anfangswert normal
Gilt für Pseudo-Elemente ::first-letter und inline-level erstes Element des Block-Containers.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax Object.style.initialLetter = "<number>";

Syntax

initial-letter: normal | <number> | <integer>;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Slabo 27px';
      font-size: 1.5em;
      line-height: 1.5;
      padding: 40px 0;
      }
      article {
      width: 80%;
      }
      .example::first-letter {
      -webkit-initial-letter: 2;
      initial-letter: 1;
      color: #8ebf42;
      font-weight: bold;
      margin-right: .60em;
      }
    </style>
  </head>
  <body>
    <article class="example">
     Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.
    </article>
  </body>
</html>

Werte

Wert Beschreibung
normal Kein Anfangsbuchstaben-Effekt. Das ist der Standardwert dieser Eigenschaft.
<number> Gibt die Größe des Anfangsbuchstaben an, wie viele Zeilen er besetzt. Negative Werte sind nicht erlaubt.
<integer> Gibt an, wie viele Zeilen der Anfangsbuchstabe sinken soll.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

9.0 partial


Finden Sie das nützlich?

Ähnliche Artikel