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 Zeichenfolge) fest, das am Ende einer Zeile vor einem Trennstrich verwendet wird.

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

Probieren Sie es aus

hyphenate-character: auto;

hyphenate-character: "=";

hyphenate-character: "—";

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

#example-element {
  border: 2px dashed #999999;
  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 Bindestrichs verwendet werden soll, oder gibt an, dass der User-Agent eine geeignete Zeichenfolge basierend auf den aktuellen typografischen Konventionen auswählen soll (Standard).

Werte

<string>: Die <string>, die am Ende der Zeile vor einem Trennstrich 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 Inhaltssprache. Dies ist der Standardwert der Eigenschaft und muss nur explizit gesetzt werden, um einen anderen geerbten Wert zu überschreiben.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

hyphenate-character = 
  auto      |
  <string>

Beispiele

Dieses Beispiel zeigt zwei identische Textblöcke, bei denen hyphens gesetzt ist, um sicherzustellen, dass sie dort brechen, wo es nötig ist, und bei weichen Trennstrichen (erstellt mit ). Der erste Block hat den Wert des Trennstrichs auf das Gleichheitszeichen (=) geändert. Der zweite Block hat kein gesetztes hyphenate-character, 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

Verwandte CSS-Eigenschaften: hyphens, overflow-wrap.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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