CSS-Eigenschaft letter-spacing

Die CSS-Eigenschaft letter-spacing ermöglicht es, die Abstände zwischen Buchstaben/Zeichen in einem Text zu definieren.

Zu den von letter-spacing unterstützten Werten gehören font-relative Werte (em, rem), parent-relative Werte (Prozentsatz), absolute Werte (px) und die normale Eigenschaft, die auf den Standard der Schrift zurückgesetzt wird.

Die Eigenschaft letter-spacing unterstützt negative Werte.

Die Eigenschaft letter-spacing ist veränderbar, so dass sich der Abstand bei einem definierten Übergang stufenlos ändert.

Die Übergangsgeschwindigkeit wird durch animation-timing-function definiert.
Anfangswert normal
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Ja
Animierbar Ja
Version CSS1
DOM Syntax object.style.letterSpacing = "5px";

Syntax

letter-spacing: normal | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      letter-spacing: normal;
      }
      .spacing {
      letter-spacing: 4px;
      }
      .spacing-negative { 
      letter-spacing: -4px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Letter-spacing</h2>
    <p>Das ist ein Absatz.</p>
    <p class="spacing">Das ist ein Absatz.</p>
    <p class="spacing-negative">Das ist ein Absatz.</p>
  </body>
</html>

Im angegebenen Beispiel ist der erste ein normaler Absatz, für den zweiten Absatz wird letter-spacing auf 4px und für den dritten Absatz ein negativer Wert (-4px) eingestellt.

Ein weiteres Beispiel, wo letter-spacing mit der Eigenschaft transition verwendet wird. Sie müssen mit der Maus über den Text fahren, um den Übergang zu sehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background-color: #fff;
      color: #666;
      font-size: 1em;
      font-family: Roboto, Helvetica  Sans-serif;
      }
      .example1 {
      background-color: #666;
      color: #eee;
      padding: 1em;
      letter-spacing: .5em;
      -webkit-transition: letter-spacing .5s ease;
      transition: letter-spacing .5s ease;
      }
      .example1:hover {
      letter-spacing: normal;
      }
      .example2{
      background-color: #eee;
      color: #666;
      padding: 1em;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Letter-spacing</h2>
    <div class="example1">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
      </p>
      <div class="example2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
      </div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
normal Bedeutet, dass es keine zusätzlichen Leerzeichen zwischen den Zeichen gibt. Es ist der Standardwert dieser Eigenschaft.
length Definiert einen zusätzlichen Abstand zwischen den Zeichen. Negative Werte sind erlaubt.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
30.0+ 12.0+ 2.0+ 6.1+ 17.0+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'letter-spacing'?
Finden Sie das nützlich?