Silbentrennung-limit-zeichen

Die hyphenate-limit-chars-Eigenschaft in CSS teilt dem Browser mit, wie viele Zeichen ein Wort vor der Silbentrennung haben muss und wie viele Zeichen mindestens vor und nach dem Bindestrich stehen müssen. So können wir unbeholfene Silbentrennungen vermeiden und haben zusätzliche Kontrolle darüber, wie Wörter von Zeile zu Zeile fließen.

.element {
  hyphens: auto;
  hyphenate-limit-chars: 10 3 4;
}

In der obigen CSS-Regel gibt die letzte Deklaration dem Browser an, dass nur Wörter mit 10 oder mehr Zeichen getrennt werden sollen. Wenn dies geschieht, müssen mindestens drei Zeichen vor und mindestens vier Zeichen nach dem Bindestrich stehen. Beachten Sie, dass hyphens: auto; nur dann benötigt wird, wenn hyphens: none; irgendwo anders im Stylesheet festgelegt wurde, damit die Silbentrennung aktiviert ist.

hyphenate-limit-chars ist im CSS Text Module Level 4 Spezifikation enthalten, die sich derzeit im Entwurfsstatus befindet. Das bedeutet, dass die Definition nur zur Diskussion bereitgestellt wird und jederzeit geändert werden kann.

Syntax

hyphenate-limit-chars: [auto | <integer> ]{1,3};

Anfangswert: auto
Gilt für: Text
Vererbt: Ja
Berechneter Wert: Drei Werte, jeder entweder das Schlüsselwort auto oder eine Ganzzahl
Animationstyp: nach berechnetem Werttyp

Wenn der dritte Wert nicht angegeben ist, wird derselbe Wert wie der zweite verwendet. Wenn sowohl der zweite als auch der dritte Wert nicht angegeben sind, wird er zu auto ausgewertet, was bedeutet, dass der Benutzer-Agent basierend auf Sprache und Layout entscheidet, was am besten ist.

Der Standardwert von hyphenate-limit-chars, auto, entspricht 5 2 2 (d. h. die Wortlänge beträgt 5, und 2 ist die Mindestanzahl von Zeichen vor und nach dem Bindestrich).

Werte

hyphenate-limit-chars: auto;
hyphenate-limit-chars: 8 2 4;
hyphenate-limit-chars: 8 2; /* 8 2 auto */
hyphenate-limit-chars: 8; /* 8 auto auto */

/* Global values */
hyphenate-limit-chars: initial;
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: unset;

Browser-Unterstützung

Die Eigenschaft hyphenate-limit-chars wird von Edge und Internet Explorer 10+ mit dem Präfix -ms unterstützt. Sie wird auch in Safari mit -webkit-hyphenate-limit-before und –webkit-hyphenate-limit-after unterstützt, die beide veraltete Eigenschaften sind. Wie ihre Namen schon sagen, gibt -webkit-hyphenate-limit-before die Mindestanzahl von Zeichen vor dem Bindestrich an und –webkit-hyphenate-limit-after die Mindestanzahl von Zeichen nach dem Bindestrich.

Wenn wir all dies zusammenfassen, erhalten wir

.element {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

  -webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 4; /* For Safari */
  -ms-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
}