hyphenate-character CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
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 weiche Trennstriche werden entsprechend dem angegebenen Wert der hyphenate-character-Eigenschaft 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
hyphenate-character: <string>;
hyphenate-character: auto;
Der Wert legt entweder die Zeichenkette fest, die anstelle eines Trennstrichs verwendet werden soll, oder gibt an, dass der Benutzeragent eine geeignete Zeichenkette basierend auf den aktuellen typografischen Konventionen auswählen soll (Standard).
Werte
<string>-
Der
<string>, der am Ende der Zeile vor einem Trennungsumbruch verwendet werden soll. Der Benutzeragent kann diesen Wert kürzen, wenn zu viele Zeichen verwendet werden. auto-
Der Benutzeragent wählt eine geeignete Zeichenkette 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 so eingestellt ist, dass sie überall dort aufbrechen, wo es nötig ist, und bei weichen Trennstrichen (erzeugt mit ­).
Im ersten Block wird der Wert des Trennzeichens auf das Gleichheitszeichen (=) geändert.
Der zweite Block hat kein hyphenate-character gesetzt, was für Benutzeragenten, die diese Eigenschaft unterstützen, gleichbedeutend mit hyphenate-character: auto ist.
HTML
<dl>
<dt><code>hyphenate-character: "="</code></dt>
<dd id="string" lang="en">Superc­alifragilisticexpialidocious</dd>
<dt><code>hyphenate-character is not set</code></dt>
<dd lang="en">Superc­alifragilisticexpialidocious</dd>
</dl>
CSS
dd {
width: 90px;
border: 1px solid black;
hyphens: auto;
}
dd#string {
-webkit-hyphenate-character: "=";
hyphenate-character: "=";
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Text Module Level 4 # propdef-hyphenate-character |
Browser-Kompatibilität
Siehe auch
- Verwandte CSS-Eigenschaften:
hyphens,overflow-wrap.