text-wrap
text-wrap: wrap | nowrap | balance | pretty | stable
Steruje tym, jak tekst zawija się w wiersze. Oprócz włączania i wyłączania zawijania potrafi wyrównać wiersze wielowierszowego nagłówka (balance) albo dopasować koniec akapitu tak, by w ostatnim wierszu nie został pojedynczy wyraz (pretty).
Wartości
- wrap – domyślnie: zwykłe zawijanie.
- nowrap – bez zawijania.
- balance – mniej więcej równo długie wiersze. Przeglądarki robią to tylko przy krótkich tekstach (kilka wierszy), więc jest to przeznaczone dla nagłówków i podpisów.
- pretty – lepsze zawijanie na końcu akapitu (przede wszystkim bez pojedynczego wyrazu w ostatnim wierszu). Wolniejsze, do zwykłego tekstu.
- stable – przy pisaniu w edytowalnym tekście wcześniejsze wiersze nie zawijają się na nowo.
Jest skrótem dla text-wrap-mode (wrap/nowrap) i text-wrap-style (balance, pretty …).
Wartość początkowa: wrap. Dziedziczona: tak. Dotyczy: wszystkich elementów.
Przykłady
Nagłówek bez wyrównania i z balance:
<h3>Jasny i wymowny nagłówek, który zawija się na samym końcu</h3> <h3 class="balanced">Jasny i wymowny nagłówek, który zawija się na samym końcu</h3>
h3 {
max-width: 300px;
margin: 0 0 10px;
font: 700 20px/1.3 Arial, sans-serif;
border: 1px dashed #999;
}
.balanced { text-wrap: balance; }
Akapity bez pojedynczego wyrazu na końcu (w Firefoksie jeszcze nie działa, tekst zawija się jak zwykle):
p {
text-wrap: pretty;
}
Na co uważać
- Wszystkie duże przeglądarki obsługują właściwość jako całość od 2024 roku (Chrome 114, Firefox 121, Safari 17.4). Wartości
prettyFirefox jeszcze nie ma; Chrome ma ją od wersji 117, Safari od 26 (stan na październik 2026). W starszej przeglądarce tekst po prostu zawija się jak zwykle – można jej używać bez ryzyka. balancenie zmniejsza szerokości elementu, tylko rozkłada tekst na wiersze – po prawej zostaje wtedy wolne miejsce (widać to przy nagłówku z tłem albo ramką).- Nie używaj
balancedo długich akapitów – od pewnej liczby wierszy przeglądarka je pomija i liczy na próżno.
Obsługa w przeglądarkach
Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od marca 2024, za szeroko dostępne uznawane od września 2026. Od wersji: Chrome 114, Firefox 121, Safari 17.4. Stan: październik 2026 (MDN browser-compat-data).
Zobacz też:
white-space
hyphens
text-align