Właściwość CSSTypografia
overflow-wrap
Łamie długie wyrazy tylko wtedy, gdy inaczej wystawałyby poza kontener.
- Wartość domyślna
normal- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- elementy tekstowe
- JavaScript
element.style.overflowWrap = "anywhere"
Przykład
#CSS
.comment {
overflow-wrap: anywhere;
}HTML przykładu
<div class="comment stage" style="overflow-wrap: anywhere; width: 240px;">Świetny kurs! Mój projekt: https://github.com/uczen-codeworlds/moj-pierwszy-projekt-html-i-css</div>Podgląd
Definicja i zastosowanie
#Właściwość overflow-wrap to bezpiecznik dla długich ciągów znaków. W przeciwieństwie do word-break: break-all nie rusza zwykłych wyrazów. Łamie wyraz tylko wtedy, gdy nie da się go zmieścić w linii w całości.
break-word i anywhere działają podobnie, ale anywhere bierze też udział w liczeniu minimalnej szerokości elementu. W praktyce anywhere lepiej chroni przed rozpychaniem kolumn w układach flex i grid.
Dawniej ta właściwość nazywała się word-wrap i ta nazwa nadal działa jako alias.
Składnia
#Składnia
overflow-wrap: normal | break-word | anywhere;Wartości
#- Długi wyraz wystaje poza ramkę.
- Długi wyraz łamie się, zwykłe zostają nietknięte.
- Jak break-word, ale uwzględniane też w szerokości minimalnej.
Wartości w praktyce
#normal
Długi wyraz wystaje poza ramkę.
.demo { overflow-wrap: normal; }break-word
Długi wyraz łamie się, zwykłe zostają nietknięte.
.demo { overflow-wrap: break-word; }anywhere
Jak break-word, ale uwzględniane też w szerokości minimalnej.
.demo { overflow-wrap: anywhere; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dodaj
overflow-wrap: anywheredo komentarzy i treści od użytkowników. Jeden długi link nie rozepchnie wtedy układu. - W kontenerach flex połącz je z
min-width: 0na elemencie z tekstem.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.