# Semantyka tekstu - element "wbr"

Załóżmy, że do zawartości interesującego na elementu HTML (z jakiegoś powodu) chcemy dodać ciąg znaków pozbawiony jakiegokolwiek białego znaku oraz znaku `-`.

Przykład:

```html
<p style="width:200px; border:5px solid red;">
  article{background:black;color:white;width:500px;height:500px;}
</p>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FGmmsAmAzDeQDKpTIt0TU%2FZrzut%20ekranu%202025-09-24%20o%2015.48.08.png?alt=media&#x26;token=8c840e6a-c08b-40e7-94cb-67f24794cd50" alt=""><figcaption></figcaption></figure>

Nasz przykładowy ciąg znaków znajdujący się w zawartości przykładowego elementu `p` nie mieści się w granicy szerokości wspomnianego elementu `p`, ponadto jeden z mechanizmów przeglądarki internetowej nie może określić, w którym miejscu w naszym przykładowym ciągu znaków może nastąpić przełamanie do następnego wiersza, ponieważ nasz przykładowy ciąg znaków pozbawiony jest jakiegokolwiek białego znaku oraz znaku `-`.

Aby wskazać dla przeglądarki internetowej sugerowane miejsce przełamania wiersza treści możemy wykorzystać do tego celu element wbr.

Przykład:

```html
<p style="width:200px; border:5px solid red;">
  article<wbr>{<wbr>background:black;<wbr>color:white;<wbr>width:500px;<wbr>height:500px;<wbr>}
</p>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FFJ1FrFfwKZFAAbHkN1e4%2FZrzut%20ekranu%202025-09-24%20o%2015.48.29.png?alt=media&#x26;token=4df05c56-40da-4e0c-823d-848a7cd3d659" alt=""><figcaption></figcaption></figure>
