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 getrennt werden sollen, wenn der Text über mehrere Zeilen umbrochen wird. Sie kann die Silbentrennung vollständig verhindern, an manuell angegebenen Stellen innerhalb des Textes trennen oder den Browser automatisch Trennstriche an geeigneten Stellen einfügen lassen.

Probieren Sie es aus

hyphens: none;

hyphens: manual;

hyphens: auto;

<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;
}

Hinweis: Im obigen Beispiel enthält der String "An extraordinarily long English word!" das versteckte Zeichen &shy; (soft hyphen): An extra&shy;ordinarily long English word!. Dieses Zeichen wird verwendet, um eine potenzielle Stelle für einen Trennstrich anzugeben, wenn hyphens: manual; angegeben ist.

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

Hinweis: Die Regeln, die definieren, wie die Silbentrennung durchgeführt wird, sind nicht explizit durch die Spezifikation definiert, sodass die genaue Trennung je nach Browser variieren kann.

Falls unterstützt, kann hyphenate-character verwendet werden, um ein alternatives Trennzeichen am Zeilenende 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 an Zeilenumbrüchen nicht getrennt, auch wenn innerhalb der Wörter Zeichen auf Trennstellen hinweisen. Zeilen werden nur bei Leerzeichen umbrochen.

manual

Standardwert. Wörter werden nur getrennt, wenn Zeichen innerhalb des Wortes auf Trennstellen hinweisen. Siehe Vorschlagen von Trennstellen unten für Details.

auto

Der Browser kann Wörter an geeigneten Trennstellen automatisch trennen und dabei beliebige Regeln verwenden. Vorgeschlagene Trennstellen (siehe Vorschlagen von Trennstellen unten) überschreiben jedoch die automatische Trennstellenauswahl, wenn sie vorhanden sind.

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 mit dem HTML-Attribut lang angeben, um sicherzustellen, dass die automatische Silbentrennung in dieser Sprache angewendet wird.

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

Vorschlagen von Trennstellen

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

U+2010 (HYPHEN)

Das "harte" Bindestrich-Zeichen zeigt eine sichtbare Trennstelle an. Selbst wenn die Zeile an dieser Stelle nicht tatsächlich umbrochen wird, wird der Bindestrich dennoch gerendert.

U+00AD (SHY)

Ein unsichtbarer, "soft" hyphen. Dieses Zeichen wird nicht sichtbar gerendert; stattdessen markiert es eine Stelle, an der der Browser das Wort bei Bedarf trennen sollte. In HTML verwenden Sie &shy;, um einen weichen Trennstrich einzufügen.

Hinweis: Wenn das HTML-Element <wbr> zu einem Zeilenumbruch führt, wird kein Bindestrich 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

Siehe auch