Tag wbr

Tag wbr označava mesto gde brauzer može da napravi prelom reda, ukoliko je to potrebno (ako se tekst ne uklapa u širinu elementa). Takvi prelami se nazivaju mekim prelamima.

Ne zahteva zatvarajući tag.

Prilikom prelamanja reči preko taga wbr znak za prelamanje "-" se ne dodaje. Ako vam je potreban - koristite znak za meki prelom ­ (tačka zarez na kraju je obavezna, nije štamparska greška).

Meki prelom ­ ukazuje brauzeru na mesto gde može da napravi prelom reči (ukoliko je to potrebno), stavljajući pri tome znak za prelamanje "-".

Meki prelami ­ neće raditi ako je svojstvo hyphens postavljeno na vrednost none (a prelami wbr će raditi).

Primer . Tekst bez preloma

Hajde da pogledamo primer teksta u kojem ima dugačkih reči koje izlaze preko granice bloka. Bloku ćemo zadati malu širinu tako da se dugačka reč u njemu ne može smestiti:

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

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

Результат:

Primer . Tag wbr

A ovde, hajde da dodamo tag wbr na mestima gde preporučujemo brauzeru da napravi prelamanje reči ukoliko je potrebno (obratite pažnju na to da će brauzer napraviti prelamanje ne svuda gde smo mi to označili):

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

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

Результат:

Primer . Znak ­

Hajde da probamo umesto taga wbr da stavimo znak ­. Na mestima prelamanja će se prikazivati defisi:

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

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

Результат:

Pogledajte takođe