hyphens

Wartości

• manual – domyślnie: wyrazy dzielą się tylko tam, gdzie tekst zawiera miękki dywiz ­.
• auto – przeglądarka dzieli sama według słownika języka (i respektuje ­).
• none – żadnego dzielenia, nawet przy ­.

Wartość początkowa: manual. Dziedziczona: tak. Dotyczy: wszystkich elementów.

Przykłady

Wąska justowana kolumna bez dzielenia i z dzieleniem wyrazów (akapit ma lang="pl"):

<div class="columns">
  <p lang="pl">Konstantynopolitańczykowianeczka nieprzewidywalnie przeprowadzała najprzeróżniejsze eksperymenty.</p>
  <p lang="pl" class="hyphenated">Konstantynopolitańczykowianeczka nieprzewidywalnie przeprowadzała najprzeróżniejsze eksperymenty.</p>
</div>

.columns {
  display: flex;
  gap: 16px;
}
.columns p {
  width: 120px;
  margin: 0;
  text-align: justify;
  border: 1px dashed #999;
}
.hyphenated { hyphens: auto; }

Na co uważać

• Bez atrybutu lang (dla całej strony <html lang="pl">) przeglądarka nie zna języka i nie dzieli.
• Nie każdy język jest wszędzie dzielony: Chrome dzieli na przykład czeski dopiero od wersji 112 (2023), Firefox od 130 (2024), a Safari od 9.1, słowackiego Safari jeszcze nie dzieli (stan na październik 2026). Starsze przeglądarki zostawiają wyrazy w całości.
• Safari obsługuje właściwość bez prefiksu dopiero od wersji 17 (2023), wcześniej trzeba było -webkit-hyphens.
• Dzielenie różni się między przeglądarkami i nie da się nim dokładnie sterować; jeśli wyraz ma się podzielić w konkretnym miejscu, użyj ­.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od września 2023, za szeroko dostępne uznawane od marca 2026. Od wersji: Chrome 55, Firefox 43, Safari 17. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
text-align
overflow-wrap
word-break
:lang()