hyphens

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.

* Some parts of this feature may have varying levels of support.

Die hyphens CSS Eigenschaft legt fest, wie Wörter bei einem Zeilenumbruch getrennt werden sollen. Es kann verhindern, dass Trennungen stattfinden, Trennungen an manuell angegebenen Stellen im Text vornehmen oder dem Browser erlauben, automatische Trennstriche an geeigneten Stellen einzufügen.

Probieren Sie es aus

Hinweis: Im obigen Beispiel enthält die Zeichenfolge "An extraordinarily long English word!" das versteckte Zeichen ­ (weiches Trennzeichen): An extra­ordinarily long English word!. Dieses Zeichen wird verwendet, um eine mögliche Stelle für einen Trennstrich anzugeben, wenn hyphens: manual; festgelegt ist.

Trennungsregeln sind sprachspezifisch. In HTML wird die Sprache durch das lang Attribut bestimmt, und Browser trennen nur, wenn dieses Attribut vorhanden ist und das entsprechende Trennungswörterbuch verfügbar ist. In XML muss das xml:lang Attribut verwendet werden.

Hinweis: Die Regeln, die festlegen, wie die Trennung durchgeführt wird, sind in der Spezifikation nicht explizit definiert, sodass die genaue Trennung von Browser zu Browser variieren kann.

Wenn unterstützt, kann hyphenate-character verwendet werden, um ein alternatives Trennzeichen am Ende der umbrochenen Zeile anzugeben.

Syntax

css
/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;

Die hyphens Eigenschaft wird als einzelner Schlüsselwortwert angegeben, der aus der unten stehenden Liste ausgewählt wird.

Werte

none

Wörter werden nicht an Zeilenumbrüchen getrennt, selbst wenn Zeichen innerhalb der Wörter auf Trennmöglichkeiten hinweisen. Zeilen werden nur bei Leerzeichen umbrochen.

manual

Standardwert. Wörter werden für Zeilenumbrüche nur dort aufgetrennt, wo Zeichen innerhalb des Wortes Trennmöglichkeiten vorschlagen. Siehe Trennmöglichkeiten vorschlagen unten für Details.

auto

Der Browser kann Wörter automatisch an geeigneten Trennungsstellen umbrechen, indem er beliebige Regeln befolgt. Allerdings überschreiben vorgeschlagene Trennmöglichkeiten (siehe Trennmöglichkeiten vorschlagen unten) die automatische Auswahl der Trennungsstellen, wenn vorhanden.

Hinweis: Das Verhalten der Einstellung auto hängt davon ab, dass die Sprache korrekt getaggt ist, um die entsprechenden Trennungsregeln auszuwählen. Sie müssen eine Sprache mithilfe des lang HTML-Attributs angeben, um sicherzustellen, dass die automatische Trennung in dieser Sprache angewendet wird.

Hinweis: Wenn Sie word-break: break-all anwenden, werden keine Trennstriche angezeigt, selbst wenn das Wort an einer Trennungsstelle umbrochen wird.

Trennmöglichkeiten vorschlagen

Es gibt zwei Unicode-Zeichen, die verwendet werden, um manuell potenzielle Trennstellen im Text anzugeben:

U+2010 (HYPHEN)

Das Zeichen für ein "hartes" Trennzeichen zeigt eine sichtbare Trennmöglichkeit an. Selbst wenn die Zeile nicht tatsächlich an dieser Stelle umbrochen wird, wird der Trennstrich dennoch angezeigt.

U+00AD (SHY)

Ein unsichtbares, "soft"-hyphen. Dieses Zeichen wird nicht sichtbar dargestellt; stattdessen markiert es eine Stelle, an der der Browser das Wort trennen sollte, wenn eine Trennung notwendig ist. In HTML verwenden Sie ­, um ein weiches Trennzeichen einzufügen.

Hinweis: Wenn das HTML <wbr> Element zu einem Zeilenumbruch führt, wird kein Trennstrich hinzugefügt.

Formale Definition

Anfangswertmanual
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

hyphens = 
none |
manual |
auto

Beispiele

Texttrennung angeben

Dieses Beispiel verwendet drei Klassen, eine für jede mögliche Konfiguration der hyphens Eigenschaft.

HTML

html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 3
# hyphens-property

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
hyphens
auto value
Hyphenation dictionary for Afrikaans (af, af-*)
Hyphenation dictionary for Albanian (sq, sq-*)
Hyphenation dictionary for Ahmaric (am, am-*)
Hyphenation dictionary for Armenian (hy, hy-*)
Hyphenation dictionary for Assamese (as, as-*)
Hyphenation dictionary for Basque (be, be-*)
Hyphenation dictionary for Belarusian (be, be-*)
Hyphenation dictionary for Bengali (bn, bn-*)
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)
Hyphenation dictionary for Bulgarian (bg, bg-*)
Hyphenation dictionary for Catalan (ca, ca-*)
Hyphenation dictionary for Croatian (hr, hr-*)
Hyphenation dictionary for Mongolian (Cyrillic) (mn-cyrl, mn-cyrl-*)
Hyphenation dictionary for Czech (cs, cs-*)
Hyphenation dictionary for Danish (da, da-*)
Hyphenation dictionary for Dutch (nl, nl-*)
Hyphenation dictionary for English (en, en-*)
Hyphenation dictionary for Esperanto (eo, eo-*)
Hyphenation dictionary for Estonian (et, et-*)
Hyphenation dictionary for Ethiopic script (mul-ethi, mul-ethi-*)
Hyphenation dictionary for Ethiopic script (und-ethi, und-ethi-*)
Hyphenation dictionary for Finnish (fi, fi-*)
Hyphenation dictionary for French (fr, fr-*)
Hyphenation dictionary for Galician (gl, gl-*)
Hyphenation dictionary for Georgian (ka, ka-*)
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)
Hyphenation dictionary for Gujarati (gu, gu-*)
Hyphenation dictionary for Hindi (hi, hi-*)
Hyphenation dictionary for Hungarian (hu, hu-*)
Hyphenation dictionary for Icelandic (is, is-*)
Hyphenation dictionary for Interlingua (ia, ia-*)
Hyphenation dictionary for Irish (ga, ga-*)
Hyphenation dictionary for Italian (it, it-*)
Hyphenation dictionary for Kannada (kn, kn-*)
Hyphenation dictionary for Kurmanji (kmr, kmr-*)
Hyphenation dictionary for Latin (la, la-*)
Hyphenation dictionary for Latvian (lv, lv-*)
Hyphenation dictionary for Lithuanian (lt, lt-*)
Hyphenation dictionary for Malayalam (ml, ml-*)
Hyphenation dictionary for Marathi (mr, mr-*)
Hyphenation dictionary for Modern Greek (el, el-*)
Hyphenation dictionary for Mongolian (mn, mn-*)
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)
Hyphenation dictionary for Old Slavonic (cu, cu-*)
Hyphenation dictionary for Oriya (or, or-*)
Hyphenation dictionary for Polish (pl, pl-*)
Hyphenation dictionary for Portuguese (pt, pt-*)
Hyphenation dictionary for Punjabi/Panjabi (pa, pa-*)
Hyphenation dictionary for Russian (ru, ru-*)
Hyphenation dictionary for Slovak (sk, sk-*)
Hyphenation dictionary for Slovenian (sl, sl-*)
Hyphenation dictionary for Spanish (es, es-*)
Hyphenation dictionary for Swedish (sv, sv-*)
Hyphenation dictionary for Tamil (ta, ta-*)
Hyphenation dictionary for Telugu (te, te-*)
Hyphenation dictionary for Turkish (tr, tr-*)
Hyphenation dictionary for Turkmen (tk, tk-*)
Hyphenation dictionary for Ukrainian (uk, uk-*)
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)
Hyphenation dictionary for Welsh (cy, cy-*)

Legend

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

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch