Übersicht
Die letter-spacing CSS Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an.
| Initialwert | normal |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Ja |
| Medien | visuell |
| Berechneter Wert | ein optimaler Wert, der entweder aus einer absoluten Länge oder dem Schlüsselwort normal besteht |
| Animationstyp | Längenangabe |
| Kanonische Reihenfolge | die 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.
SiehelengthWerte 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
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
letter-spacing | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 3.5 | Safari Vollständige Unterstützung 1 | WebView Android Vollständige Unterstützung 37 | Chrome Android Vollständige Unterstützung 18 | Edge Mobile Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
| SVG support | Chrome Vollständige Unterstützung Ja | Edge Vollständige Unterstützung 12 | Firefox Keine Unterstützung Nein | IE Vollständige Unterstützung 10 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung Ja | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Edge Mobile Vollständige Unterstützung 12 | Firefox Android Keine Unterstützung Nein | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt