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 Text über mehrere Zeilen umbricht. Sie kann die Silbentrennung vollständig verhindern, an manuell angegebenen Punkten innerhalb des Textes trennen oder dem Browser erlauben, automatisch an geeigneten Stellen Trennstriche einzufügen.

Probieren Sie es aus

hyphens: none;

hyphens: manual;

hyphens: auto;

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

Hinweis: Im obigen Demo enthält der String "An extraordinarily long English word!" das versteckte  (weiche Trennzeichen) Zeichen: An extraordinarily long English word!. Dieses Zeichen wird verwendet, um einen möglichen Punkt zum Einfügen eines Trennstrichs anzugeben, wenn hyphens: manual; spezifiziert ist.

Silbentrennungsregeln sind sprachspezifisch. In HTML wird die Sprache durch das lang Attribut bestimmt, und Browser werden nur dann trennen, 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 Silbentrennung durchgeführt wird, sind nicht ausdrücklich durch die Spezifikation definiert, sodass die genaue Trennung von Browser zu Browser variieren kann.

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

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 untenstehenden Liste ausgewählt wird.

Werte

none: Wörter werden bei Zeilenumbrüchen nicht getrennt, selbst wenn Zeichen innerhalb der Wörter auf Trennpunkte hinweisen. Zeilen brechen nur an Leerstellen um.
manual: Standardwert. Wörter werden für den Zeilenumbruch nur dort getrennt, wo Zeichen innerhalb des Wortes auf Trennmöglichkeiten hinweisen. Siehe Vorschlagen von Zeilenumbruchmöglichkeiten unten für Details.
auto: Der Browser kann Wörter automatisch an geeigneten Trennstellen brechen, nach welchen Regeln auch immer. Allerdings werden vorgeschlagene Zeilenumbruchmöglichkeiten (siehe Vorschlagen von Zeilenumbruchmöglichkeiten unten) die automatische Auswahl von Trennpunkten überschreiben, wenn vorhanden.

Hinweis: Das Verhalten der Einstellung auto hängt davon ab, dass die Sprache korrekt markiert ist, um die passenden Trennregeln auszuwählen. Sie müssen eine Sprache mit dem lang HTML-Attribut 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 einem Trennpunkt bricht.

Vorschlagen von Zeilenumbruchmöglichkeiten

Es gibt zwei Unicode-Zeichen, die verwendet werden, um manuell mögliche Zeilenumbrüche im Text anzugeben:

U+2010 (HYPHEN): Das "harte" Trennzeichen weist auf eine sichtbare Zeilenumbruchmöglichkeit hin. Auch wenn die Zeile nicht tatsächlich an diesem Punkt umbricht, wird der Trennstrich trotzdem angezeigt.
U+00AD (SHY): Ein unsichtbares, "softes" Hyphen. Dieses Zeichen wird nicht sichtbar dargestellt; stattdessen markiert es eine Stelle, an der der Browser das Wort brechen 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

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

Formale Syntax

hyphens = 
  none    |
  manual  |
  auto

Beispiele

Festlegen der Texthyphenierung

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

content
overflow-wrap (ehemals word-wrap)
word-break
Leitfaden zum Umbruch und Brechen von Text

Help improve MDN

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

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