CSS initial-letter-Eigenschaft

Die initial-letter-Eigenschaft legt die Größe des ersten Buchstabens sowie die Anzahl der Zeilen fest, um die er absinkt und aufsteigt.

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

Diese Eigenschaft akzeptiert das Schlüsselwort normal oder zwei durch Leerzeichen getrennte <integer>-Werte.

INFO

Negative Werte sind nicht erlaubt.

INFO

Unterstützt in allen modernen Browsern.

Anfangswert	normal
Gilt für	::first-letter-Pseudo-Elemente und das inline-ebene erste Kind eines Block-Containers.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	`element.style.initialLetter = "2 1";`

Syntax

CSS initial-letter-Syntax

css

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

Beispiel zur initial-letter-Eigenschaft:

CSS initial-letter-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 1;
        initial-letter: 2 1;
        color: #8ebf42;
        font-weight: bold;
        margin-right: .60em;
      }
    </style>
  </head>
  <body>
    <article class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </article>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS initial-letter

Werte

Wert	Beschreibung
`normal`	Keine initial-letter-Wirkung. Dies ist der Standardwert.
`<integer> <integer>`	Der erste Wert gibt an, um wie viele Zeilen der Buchstabe absinkt. Der zweite Wert gibt an, um wie viele Zeilen er aufsteigt.
`initial`	Setzt die Eigenschaft auf ihren Standardwert zurück.
`inherit`	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was ist der Zweck der CSS-Eigenschaft 'initial-letter'?

Sie dient dazu, einen bestimmten Stil für Interpunktion in einem Text festzulegen.Sie wird verwendet, um einen Kapitälchen- oder Aufsetzeffekt auf den ersten Buchstaben eines Absatzes anzuwenden.Sie dient dazu, Text vertikal innerhalb einer Zeile auszurichten.Sie wird verwendet, um die Größe und Ausrichtung des ersten Buchstabens festzulegen, sodass dieser aufgesetzt oder abgesenkt werden kann.Sie dient dazu, die Schriftgröße eines Absatzes festzulegen.

CSS initial-letter-Eigenschaft ​

Syntax ​

Beispiel zur initial-letter-Eigenschaft: ​

Ergebnis ​