letter-spacing

Übersicht

Die letter-spacing CSS Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an.

Initialwertnormal
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Medienvisuell
Berechneter Wertein optimaler Wert, der entweder aus einer absoluten Länge oder dem Schlüsselwort normal besteht
AnimationstypLängenangabe
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* <length> Werte */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* Schlüsselwortwerte */
letter-spacing: normal;

/* Globale Werte */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

Werte

normal
Die Abstände sind die normalen Abstände für die aktuelle Schriftart. Im Gegensatz zu einem Wert von 0, erlaubt es dieser Wert dem User Agent, den Leerraum zwischen Zeichen zu ändern, um Text im Block anzuordnen.
<length>
Beschreibt Leerraum zwischen den Zeichen zusätzlich zum Standardleerraum zwischen Zeichen. Werte können negativ sein, aber es kann implementationsspezifische Beschränkungen geben. User Agents können den Leerraum zwischen den Zeichen nicht weiter verringern oder vergrößern, um den Text im Block anzuordnen.
Siehe length Werte für mögliche Einheiten.

Formale Syntax

normal | <length>

Beispiele

HTML Inhalt

<p class="first-example"> letter spacing </p>
<p class="second-example"> letter spacing </p>
<p class="third-example"> letter spacing </p>
<p class="fourth-example"> letter spacing </p>

CSS Inhalt

.first-example { letter-spacing: 0.4em; }
.second-example { letter-spacing: 1em; }
.third-example { letter-spacing: -0.05em; }
.fourth-example { letter-spacing: 6px; }

Spezifikationen

Spezifikation Status Kommentar
CSS Text Module Level 3
Die Definition von 'letter-spacing' in dieser Spezifikation.		 Arbeitsentwurf Keine Änderung
CSS Transitions
Die Definition von 'letter-spacing' in dieser Spezifikation.		 Arbeitsentwurf Definiert letter-spacing als animierbar.
CSS Level 2 (Revision 1)
Die Definition von 'letter-spacing' in dieser Spezifikation.		 Empfehlung Keine Änderung
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Die Definition von 'letter-spacing' in dieser Spezifikation.		 Empfehlung Ursprüngliche SVG Definition
CSS Level 1
Die Definition von 'letter-spacing' in dieser Spezifikation.		 Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
letter-spacingChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
SVG supportChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Keine Unterstützung NeinIE Vollständige Unterstützung 10Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

Siehe auch

Verwandte Themen