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 setzt das Zeichen (oder die Zeichenfolge), das am Ende einer Zeile vor einem Trennungsumbruch verwendet wird.

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

Probieren Sie es aus

hyphenate-character: auto;

hyphenate-character: "=";

hyphenate-character: "—";

<section id="default-example">
  <p id="example-element">An extra­ordinarily long English word!</p>
</section>

#example-element {
  border: 2px dashed #999;
  font-size: 1.5rem;
  text-align: left;
  width: 7rem;
  hyphens: auto;
}

Syntax

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

Der Wert setzt entweder die Zeichenfolge, die anstelle eines Trennstrichs verwendet werden soll, oder gibt an, dass der User-Agent basierend auf den aktuellen typografischen Konventionen eine geeignete Zeichenfolge auswählen soll (Standard).

Werte

<string>

Der <string>, der 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 Zeichenfolge basierend auf den typografischen Konventionen der Inhaltsprache. Dies ist der Standardwert der Eigenschaft und muss nur explizit gesetzt werden, um einen anderen geerbten 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, bei denen hyphens so eingestellt ist, dass sie überall dort brechen, wo es nötig ist, und bei weichen Trennungsbrüchen (erstellt mit &shy;). Der erste Block hat den Wert des Trennzeichens in das Gleichheitszeichen (=) geändert. Der zweite Block hat keinen hyphenate-character gesetzt, was für User-Agents, die diese Eigenschaft unterstützen, hyphenate-character: auto entspricht.

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

Siehe auch