CSS-Eigenschaft hyphens

Die Eigenschaft hyphens definiert, wie die Wörter getrennt werden sollen, wenn der Text über die Zeilen des Textes umgebrochen wird.

Die Eigenschaft hyphens hat drei Werte: none, manual, auto. Es erlaubt, die Silbentrennung zu verhindern oder zu erlauben, oder es nur zu erlauben, wenn bestimmte Zeichen vorhanden sind.

Die Silbentrennung funktioniert nur, wenn das Attribut span angegeben ist, da Bindestriche sprachspezifisch sind und jede Sprache ihre eigenen Regeln für die Silbentrennung hat.

Die Regeln der Silbentrennung sind in der Spezifikation nicht explizit definiert, so dass die Silbentrennung von Browser zu Browser unterschiedlich ist.
Anfangswert manual
Gilt für Alle Elemente
Geerbt Ja
Animierbar Nein
Version CSS3
DOM Syntax Object.style.hyphens = "none";

Syntax

hyphens: none | manual | auto | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p { 
      width: 55px;
      border: 1px solid #666;
      }
      p.none {
      -webkit-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
      }
      p.manual {
      -webkit-hyphens: manual;
      -ms-hyphens: manual;
      hyphens: manual;
      }
      p.auto {
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft hyphens</h2>
    <h3>none</h3>
    <p class="none">An extreme&shy;ly lengthy sentence</p>
    <h3>manual</h3>
    <p class="manual">An extreme&shy;ly lengthy sentence</p>
    <h3>auto</h3>
    <p class="auto">An extreme&shy;ly lengthy sentence</p>
  </body>
</html>

Im angegebenen Beispiel sind alle drei Werte enthalten, um die Unterschiede zu sehen.

Für maximale Browser-Kompatibilität werden Erweiterungen wie -webkit- für Safari, verwendet.

Werte

Wert Beschreibung
none Die Wörter werden mit Zeilenumbrüchen nicht unterbrochen, auch wenn die Zeichen auf Zeilenumbrüche hinweisen.
manual Die Wörter werden nur für Zeilenumbrüche unterbrochen, bei denen es innerhalb des Wortes Möglichkeiten zum Zeilenumbruch gibt. Wörter werden nur mit Bindestrich bei ‐ oder ­. Das ist der Standardwert dieser Eigenschaft.
auto Der Browser bricht Wörter automatisch an geeigneten Silbentrennungspunkten ab. Die Wörter werden mit Bindestrich versehen, wenn der Algorithmus entscheidet. Das Verhalten des automatischen Wertes hängt von der Sprache ab.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
55.0 partial 12.0 -ms- 43.0+
6 - 42 -moz-
5.1 -webkit- 42.0 partial

Übe dein Wissen

Welche Werte kann die CSS-Eigenschaft 'hyphens' haben?
Finden Sie das nützlich?