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-Eigenschaft von CSS spezifiziert, wie Wörter getrennt werden sollten, wenn Text über mehrere Zeilen umgebrochen wird. Sie kann die Trennung komplett verhindern, an manuell angegebenen Punkten innerhalb des Textes trennen oder den Browser automatisch Bindestriche einfügen lassen, wo es angebracht ist.

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; (weicher Trennstrich): An extra&shy;ordinarily long English word!. Dieses Zeichen wird verwendet, um eine potenzielle Stelle für das Einfügen eines Bindestrichs anzugeben, wenn hyphens: manual; angegeben ist.

Trennungsregeln sind sprachspezifisch. In HTML wird die Sprache durch das lang-Attribut bestimmt, und Browser trennen Wörter 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 definieren, wie die Trennung erfolgt, sind nicht explizit durch die Spezifikation definiert, daher kann die genaue Trennung von Browser zu Browser variieren.

Falls unterstützt, kann hyphenate-character verwendet werden, um ein alternatives Trennzeichen zu spezifizieren, das am Ende der umgebrochenen Zeile verwendet wird.

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 ein einzelner Schlüsselwortwert angegeben, der aus der unten stehenden Liste gewählt wird.

Werte

none

Wörter werden an Zeilenumbrüchen nicht getrennt, selbst wenn Zeichen innerhalb der Wörter mögliche Zeilenumbruchspunkte anzeigen. Zeilen werden nur bei Leerzeichen umgebrochen.

manual

Standardwert. Wörter werden für Zeilenumbrüche nur dort getrennt, wo Zeichen innerhalb des Wortes auf mögliche Trennpunkte hinweisen. Siehe Vorschlagen von Zeilenumbruchmöglichkeiten unten für Einzelheiten.

auto

Der Browser kann Wörter automatisch an geeigneten Trennpunkten nach seinen eigenen Regeln trennen. Allerdings überschreiben vorgeschlagene Zeilenumbruchmöglichkeiten (siehe Vorschlagen von Zeilenumbruchmöglichkeiten unten) die automatische Auswahl von Trennpunkten, wenn vorhanden.

Hinweis: Das Verhalten der Einstellung auto hängt davon ab, dass die Sprache korrekt markiert ist, um die geeigneten Trennungsregeln auszuwählen. Sie müssen eine Sprache mit dem lang-HTML-Attribut angeben, um sicherzustellen, dass die automatische Trennung in dieser Sprache angewendet wird.

Hinweis: Wenn Sie word-break: break-all anwenden, werden keine Bindestriche angezeigt, selbst wenn das Wort an einem Trennungspunkt umgebrochen wird.

Vorschlagen von Zeilenumbruchmöglichkeiten

Es gibt zwei Unicode-Zeichen, die verwendet werden, um manuell mögliche Zeilenumbruchpunkte innerhalb des Textes anzugeben:

U+2010 (HYPHEN)

Das "harte" Bindestrich-Zeichen zeigt eine sichtbare Zeilenumbruchmöglichkeit an. Auch wenn die Zeile an diesem Punkt tatsächlich nicht umgebrochen wird, wird der Bindestrich dennoch angezeigt.

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 soll. In HTML wird &shy; verwendet, 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

Spezifizieren der Texttrennung

Dieses Beispiel verwendet drei Klassen, jede für eine 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