`text-autospace` CSS property

Baseline 2025 *

Neu verfügbar

Seit November 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Want more support for this feature? Tell us why.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die text-autospace CSS-Eigenschaft ermöglicht es Ihnen, den Abstand zwischen chinesischen/japanischen/koreanischen (CJK) und nicht-CJK-Zeichen festzulegen.

Erzeugt das Standardverhalten, um automatisch Abstände zwischen CJK- und nicht-CJK-Zeichen sowie um Satzzeichen herum anzuwenden. Dieser Wert hat denselben Effekt wie das Anwenden von sowohl ideograph-alpha als auch ideograph-numeric.

<autospace>

Bietet mehr Kontrolle über das Verhalten der Abstände. Es akzeptiert das Schlüsselwort no-autospace oder eine Kombination von einem oder mehreren der Werte ideograph-alpha, ideograph-numeric und punctuation, optional gefolgt von insert oder replace.

no-autospace: Deaktiviert den automatischen Abstand zwischen CJK- und nicht-CJK-Zeichen.
ideograph-alpha: Fügt nur einen Abstand zwischen ideografischen Zeichen (wie Katakana und Han) und nicht-ideografischen Buchstaben (wie Latein) hinzu. Es wird kein Abstand zwischen ideografischen Zeichen und nicht-ideografischen Zahlen hinzugefügt.
ideograph-numeric: Fügt nur einen Abstand zwischen ideografischen Zeichen (wie Katakana und Han) und nicht-ideografischen Zahlen (wie Latein) hinzu. Es wird kein Abstand zwischen ideografischen Zeichen und nicht-ideografischen Buchstaben hinzugefügt.
punctuation: Fügt nicht trennende Abstände um Satzzeichen hinzu, wie es die sprachspezifischen typografischen Konventionen erfordern.
insert: Fügt den angegebenen Abstand nur hinzu, wenn es keine vorhandenen Abstände zwischen dem ideografischen und nicht-ideografischen Text gibt.
replace: Ersetzt vorhandene Abstände (wie U+0020) zwischen ideografischen und nicht-ideografischen Zeichen durch den angegebenen Abstand.

auto

Lässt den Browser typografisch angemessene Abstände wählen. Die Abstände können zwischen verschiedenen Browsern und Plattformen variieren.

Hinweis: Wenn weder insert noch replace angegeben sind, ist das Verhalten dasselbe wie bei insert.

Hinweis: Diese Eigenschaft ist additiv mit den Eigenschaften word-spacing und letter-spacing. Der durch die Einstellung von letter-spacing erzeugte Abstand wird zu dem durch text-autospace erzeugten Abstand hinzugefügt. Dasselbe gilt für word-spacing.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	Textelemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

text-autospace = 
  normal       |
  <autospace>  |
  auto         

<autospace> = 
  no-autospace                                        |
  [ ideograph-alpha || ideograph-numeric || punctuation ] || [ insert | replace ]

Beispiele

Dieses Beispiel zeigt den Unterschied zwischen den verschiedenen Werten von text-autospace. Versuchen Sie, einen Wert aus dem Dropdown-Menü auszuwählen, um zu sehen, wie er den Abstand im Text beeinflusst.

<form>
  <label for="autospace">Choose value for <code>text-autospace:</code></label>
  <select name="autospace" id="autospace">
    <option selected value="no-autospace">no-autospace</option>
    <option value="normal">normal</option>
    <option value="ideograph-alpha">ideograph-alpha</option>
    <option value="ideograph-numeric">ideograph-numeric</option>
  </select>
</form>
<div class="unsupported">
  <code>text-autospace</code> is not supported in your browser.
</div>

html

<main>
  <figure class="no-autospace">
    <figcaption>
      <code>
        text-autospace: <span id="autospace-value">no-autospace</span>;
      </code>
    </figcaption>
    <div>
      <p>HTML超文本标记语言</p>
      <p>42四十二</p>
    </div>
  </figure>
</main>

css

.no-autospace {
  text-autospace: no-autospace;
}
.auto {
  text-autospace: auto;
}
.normal {
  text-autospace: normal;
}
.ideograph-alpha {
  text-autospace: ideograph-alpha;
}
.ideograph-numeric {
  text-autospace: ideograph-numeric;
}

figure {
  margin: 1rem;
  div {
    font-size: 2rem;
    padding: 1rem;
    font-family: sans-serif;
    border: tomato solid 1px;
  }
  p {
    margin: 0;
  }
}
main {
  max-width: max-content;
}
@supports not (text-autospace: normal) {
  form {
    display: none;
  }
  .unsupported {
    color: red;
  }
}
@supports (text-autospace: normal) {
  .unsupported {
    display: none;
  }
}

const chose = document.querySelector("#autospace");
const fig = document.querySelector("figure");
const codeValue = document.querySelector("#autospace-value");
chose.addEventListener("change", (e) => {
  fig.className = e.target.value;
  codeValue.innerText = e.target.value;
});

Spezifikationen

Spezifikation
CSS Text Module Level 4 # propdef-text-autospace

Browser-Kompatibilität

Siehe auch

text-spacing-trim
ic und ric Einheiten
CSS Text Modul

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

text-autospace CSS property

Help improve MDN

`text-autospace` CSS property