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 legt fest, wie Wörter getrennt werden sollten, wenn Text über mehrere Zeilen umgebrochen wird. Sie kann die Trennung vollständig verhindern, an manuell festgelegten Punkten im Text trennen oder dem Browser ermöglichen, automatisch Trennstriche einzufügen, wo es angebracht ist.

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 Beispiel enthält der String "An extraordinarily long English word!" das versteckte  (weiches Trennzeichen)-Zeichen: An extraordinarily long English word!. Dieses Zeichen wird verwendet, um eine potenzielle Stelle für das Einfügen eines Trennstrichs zu markieren, wenn hyphens: manual; angegeben 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 definieren, wie die Trennung durchgeführt wird, sind nicht explizit 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 anzugeben, 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 aus der folgenden Liste angegeben.

Werte

none: Wörter werden nicht bei Zeilenumbrüchen getrennt, selbst wenn Zeichen innerhalb der Wörter auf Trennpunkte hinweisen. Zeilen umbrechen nur bei Leerzeichen.
manual: Standardwert. Wörter werden nur für Zeilenumbrüche getrennt, wo Zeichen innerhalb des Wortes auf Trennmöglichkeiten hinweisen. Siehe Vorschlagen von Trennmöglichkeiten unten für Details.
auto: Der Browser kann Wörter automatisch an geeigneten Trennungsstellen trennen, nach welchen Regeln er auch immer wählt. Allerdings werden vorgeschlagene Trennmöglichkeiten (siehe Vorschlagen von Trennmöglichkeiten unten) die automatische Trennpunktauswahl überschreiben, wenn sie vorhanden sind.

Hinweis: Das Verhalten der auto-Einstellung hängt davon ab, dass die Sprache korrekt markiert ist, um die entsprechenden 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 Trennzeichen angezeigt, selbst wenn das Wort an einem Trennpunkt umbricht.

Vorschlagen von Trennmöglichkeiten

Es gibt zwei Unicode-Zeichen, die verwendet werden können, um manuell potenzielle Trennpunkte innerhalb von Text anzugeben:

U+2010 (HYPHEN): Das "harte" Trennzeichen stellt eine sichtbare Trennmöglichkeit dar. Selbst wenn die Zeile an diesem Punkt nicht tatsächlich umbricht, wird der Bindestrich dennoch gerendert.
U+00AD (SHY): Ein unsichtbares, "softes" Trennzeichen. Dieses Zeichen wird nicht sichtbar gerendert; stattdessen markiert es eine Stelle, an der der Browser das Wort trennen sollte, wenn dies notwendig ist. In HTML verwenden Sie , um ein weiches Trennzeichen einzufügen.

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

Text-Trennung 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

content
overflow-wrap (ehemals word-wrap)
word-break
Leitfaden zum Umbruch und Trennen 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