CSS-Eigenschaft hyphens

❮ Vorige Nächste ❯

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>

Versuch es selber!

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.