`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.

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

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