Тег wbr

Тег wbr означава место где прегледач може да преломи линију у случају потребе (ако се текст не уклапа у ширину елемента). Такви преломи се зову мекши.

Не захтева затварајући тег.

Приликом прелома речи кроз тег wbr симбол за прелом "-" се не додаје. Ако вам је потребан - користите симбол меког прелома ­ (тачка зарезом на крају је обавезна, ово није грешка у куцању).

Меки прелом ­ означава прегледачу место где може да направи прелом речи (у случају потребе), поставивши притом симбол за прелом "-".

Меки преломи ­ неће радити ако је особина hyphens постављена на вредност none (а преломи wbr ће).

Пример . Текст без прелома

Да погледамо узорак текста у коме има дугачких речи које излазе преко границе блока. Блоку ћемо задати малу ширину тако да се дугачка реч у њему не уклапа:

html<div id="elem">
  this is supersupersuperlong text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Пример . Тег wbr

А овде, да додамо тег wbr у местима где препоручујемо прегледачу да направи прелом речи у случају потребе (обратите пажњу на то да ће прегледач направити преломе не свуда где смо указали):

html<div id="elem">
  this is super<wbr>super<wbr>super<wbr>long text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Пример . Симбол ­

Да покушамо уместо тега wbr да ставимо симбол ­. На местима прелома ће се приказивати цртице:

html<div id="elem">
  this is super­super­super­long text
</div>

css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Погледајте такође