word-break
Pozwala łamać wyrazy w dowolnym miejscu, gdy nie mieszczą się w linii.
- Wartość domyślna
normal- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.wordBreak = "break-all"
Przykład
#.token {
word-break: break-all;
font-family: monospace;
}<p class="stage" style="margin: 0; width: 240px;">Twój klucz: <code class="token" style="word-break: break-all;">cw_live_4f9a2b7c1e8d3f6a0b5c9e2d7f1a4b8c</code></p>Definicja i zastosowanie
#Właściwość word-break określa, gdzie wolno łamać linię wewnątrz wyrazów. Domyślnie w językach takich jak polski linie łamią się tylko na spacjach i łącznikach, więc bardzo długi ciąg znaków może wystawać poza kontener.
break-all pozwala przełamać wyraz między dowolnymi dwoma znakami. To skuteczne przy długich adresach URL, identyfikatorach i ciągach bez spacji, ale łamie też zwykłe wyrazy w nieoczekiwanych miejscach.
W większości przypadków lepsze jest overflow-wrap: anywhere, które łamie wyraz tylko wtedy, gdy naprawdę się nie mieści.
Składnia
#word-break: normal | break-all | keep-all;Wartości
#Wartości w praktyce
#normal
.demo { word-break: normal; }break-all
.demo { word-break: break-all; }keep-all
.demo { word-break: keep-all; }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
#- Do długich adresów w tekście zwykle wystarczy
overflow-wrap: anywhere, które nie psuje zwykłych wyrazów. - Klucze, tokeny i hashe w kodzie to dobre miejsce na
break-all.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.