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>

Versuch es selber!

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.