Dziś na tapetę wrzucę Wam element <wbr>. Taki trochę niepozorny gracz w HTML5. Nieznany szerszej publiczności, rzadko używany. O co w nim chodzi?
Wyobraź sobie taki problem:
Masz długie słowo, które nie mieści się w swoim kontenerze. Co widzisz na ekranie? Poziomy suwak. Nie podoba ci się to. I co teraz? Oczywiście pierwsza myśl mówi, aby przełamać gdzieśtam owy felerny ciąg znaków, np. znacznikiem <br>. Ale my chcemy tylko OPCJONALNIE łamać tekst – tylko dla przypadków, kiedy jest to koniecznie – tylko wtedy, kiedy dane słowo nie zmieści się na danym obszarze strony. I do tego właśnie służy znacznik <wbr>, czyli word break.
Wsparcie? Wszędzie. Oprócz IE >7.
W szczególności rekomendowane użycie tego znacznika to długie adresy URL. „Co by automatyczne dzielenie tekstu nie zostawiło na końcu linii znaku interpunkcyjnego mylnie sugerującego użytkownikowi koniec adres URL.” Kolejnym zastosowaniem są fragmenty kodu na stronie. Wtedy również, z oczywistych względów, zależy nam na łamaniu ciągu znaków w odpowiednich miejscach.
A może ­ (­), albo… ​?
Encja ­ również pozwala na opcjonalne łamanie tekstu. Różni się od <wbr> tym, że na końcu linii dodaje łącznik, czyli ’-’. Niestety, jej wsparcie w teorii jest zadowalające (aktualne dane znajdziecie tutaj), jednak w praktyce wygląda ono tak „u mnie działa!”, „a u mnie nie!”. Tough stuff. Jeśli jesteście mocno zainteresowani dyskusją <wbr> vs. ­ – polecam stacka.
Warto też pamiętać, że element <wbr> można również zastąpić znakiem zero width space, czyli ​.
Mała dygresja na koniec: <wbr> czy <wbr/>, <br> czy <br/>?
No więc zgodnie z HML5 pisze się <wbr>, <br>. Zgodnie z XHTML pisze się <wbr/>, <br/>. I po problemie.
Znacie element HTML5 <wbr>? A używacie go w ogóle? Jestem ciekawa, czy tylko według mnie to baaaaardzo zapomniany tag.
