hyphenate-character

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die hyphenate-character CSS Eigenschaft legt das Zeichen (oder die Zeichenkette) fest, das am Ende einer Zeile vor einem Trennungsumbruch verwendet wird.

Sowohl automatische als auch bedingte Trennstriche werden entsprechend dem angegebenen hyphenate-character-Wert angezeigt.

Probieren Sie es aus

Syntax

css
hyphenate-character: <string>;
hyphenate-character: auto;

Der Wert legt entweder die zu verwendende Zeichenkette anstelle eines Trennstrichs fest oder gibt an, dass der User-Agent eine geeignete Zeichenkette basierend auf den aktuellen typografischen Konventionen auswählen sollte (Standard).

Werte

<string>

Die <string>, die am Ende der Zeile vor einem Trennungsumbruch verwendet werden soll. Der User-Agent kann diesen Wert kürzen, wenn zu viele Zeichen verwendet werden.

auto

Der User-Agent wählt eine geeignete Zeichenkette basierend auf den typografischen Konventionen der Inhaltssprache aus. Dies ist der Standardwert der Eigenschaft und muss nur explizit gesetzt werden, um einen anderen vererbten Wert zu überschreiben.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

hyphenate-character = 
auto |
<string>

Beispiele

Dieses Beispiel zeigt zwei identische Textblöcke, die hyphens gesetzt haben, um sicherzustellen, dass sie dort umgebrochen werden, wo es nötig ist, und bei bedingten Trennungen (erstellt mit &shy;). Der erste Block hat den Wert des Trennzeichens auf das Gleichheitszeichen (=) geändert. Der zweite Block hat kein hyphenate-character gesetzt, was für User-Agents, die diese Eigenschaft unterstützen, gleichbedeutend mit hyphenate-character: auto ist.

HTML

html
<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>

CSS

css
dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 4
# propdef-hyphenate-character

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hyphenate-character
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch