word-spacing
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die word-spacing
CSS Eigenschaft legt die Länge des Abstands zwischen Wörtern und zwischen Tags fest.
Probieren Sie es aus
word-spacing: normal;
word-spacing: 1rem;
word-spacing: 4px;
word-spacing: -0.4ch;
<section id="default-example">
<p id="example-element">
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: Amstelvar;
font-style: normal;
}
section {
font-size: 1.2em;
font-family: Amstelvar, serif;
}
Syntax
/* Keyword value */
word-spacing: normal;
/* <length> values */
word-spacing: 3px;
word-spacing: 0.3em;
/* Global values */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;
Werte
Barrierefreiheit
Ein großer positiver oder negativer word-spacing
-Wert kann die Lesbarkeit der Sätze, auf die das Styling angewendet wird, beeinträchtigen. Bei einem sehr großen positiven Wert werden die Wörter so weit auseinander liegen, dass es nicht mehr wie ein Satz wirkt. Bei einem großen negativen Wert überlappen sich die Wörter so stark, dass Anfang und Ende jedes Wortes nicht erkennbar sind.
Lesbare word-spacing
-Werte müssen fallweise bestimmt werden, da verschiedene Schriftfamilien unterschiedliche Zeichenbreiten haben. Es gibt keinen festen Wert, der sicherstellt, dass alle Schriftfamilien automatisch ihre Lesbarkeit behalten.
Beispiele
HTML
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>
CSS
#mozdiv1 {
word-spacing: 15px;
}
#mozdiv2 {
word-spacing: 5em;
}
Formale Definition
Anfangswert | normal |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Ja |
Prozentwerte | bezieht sich auf die Breite des jeweiligen Zeichens |
Berechneter Wert | absolute <length> |
Animationstyp | Längenangabe |
Formale Syntax
Spezifikationen
Specification |
---|
CSS Text Module Level 3 # word-spacing-property |
Scalable Vector Graphics (SVG) 2 # WordSpacingProperty |
Browser-Kompatibilität
Siehe auch
letter-spacing
- SVG
word-spacing
Attribut