<wbr>
Miejsce, w którym przeglądarka może przełamać długie słowo lub ciąg znaków, gdy zabraknie miejsca w linii.
- Wyświetlanie
- inline
- Znacznik zamykający
- Brak, element pusty
- Dozwolona zawartość
- Brak, element pusty
Przykład
#<div class="stage" style="max-width: 200px;">
<p>Bez wbr: <code>calculateTotalPriceWithDiscount()</code></p>
<p>Z wbr: <code>calculate<wbr>Total<wbr>Price<wbr>With<wbr>Discount()</code></p>
</div>Pierwsza nazwa nie ma gdzie się złamać, więc wystaje poza ramkę. Druga łamie się w miejscach oznaczonych przez <wbr>.
Definicja i zastosowanie
#Element <wbr> (od angielskiego word break opportunity) wskazuje miejsce, w którym przeglądarka może przełamać linię, jeśli zabraknie miejsca. Gdy miejsca wystarczy, nic się nie dzieje. Nie dodaje też łącznika ani żadnego innego znaku.
Przydaje się przy długich ciągach bez spacji: nazwach funkcji w stylu camelCase, ścieżkach do plików, adresach URL czy identyfikatorach, które na wąskim ekranie wystawałyby poza kontener.
Pokrewne rozwiązania działają nieco inaczej. Encja ­ (miękki łącznik) łamie wyraz i dodaje w miejscu podziału łącznik. W CSS overflow-wrap: anywhere łamie długie ciągi automatycznie w dowolnym miejscu, a hyphens: auto dzieli wyrazy według reguł języka. <wbr> daje za to pełną kontrolę nad tym, gdzie nastąpi podział.
Składnia
#bardzo<wbr>Długa<wbr>NazwaAtrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
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
#- Jeśli w miejscu podziału ma się pojawić łącznik, użyj
­zamiast<wbr>. - Dla treści, na które nie masz wpływu, np. komentarzy użytkowników, lepiej sprawdzi się CSS
overflow-wrap: anywhere. - W adresach URL wstawiaj
<wbr>po ukośnikach, żeby podział wypadał w naturalnych miejscach.
Powiązane hasła
#- <br>Przełamanie linii w miejscu wstawienia, bez zaczynania nowego akapitu.
- <code>Fragment kodu komputerowego: nazwa zmiennej, funkcji, znacznika albo pliku, a także krótki listing.
- <pre>Tekst sformatowany wstępnie: zachowuje spacje, tabulatory i przełamania linii dokładnie tak, jak w kodzie.
- <span>Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.