A wbr tag

A wbr tag azt a helyet jelöli, ahol a böngésző szükség esetén sortörést hajthat végre (ha a szöveg nem fér el az elem szélességében). Az ilyen töréseket puha töréseknek nevezzük.

Nem igényel záró taget.

Ha a szó a wbr tag-en keresztül történik, a kötőjel "-" jele nem jelenik meg. Ha szükséged van rá - használd a puha kötőjel ­ karaktert (a pontosvessző a végén kötelező, ez nem elírás).

A puha kötőjel ­ azt jelzi a böngészőnek, hogy hol törheti meg a szót (szükség esetén), miközben a "-" kötőjelet helyezi el.

A puha kötőjelek ­ nem fognak működni, ha a hyphens tulajdonság értéke none (de a wbr törések működni fognak).

Példa . Szöveg kötőjelek nélkül

Nézzünk meg egy szövegmintát, amelyben vannak hosszú szavak, amelyek kilógnak a blokk szélein. A blokknak adjunk meg kis szélességet úgy, hogy a hosszú szó ne férjen el benne:

html<div id="elem">
  ez egy szuper-szuper-szuper hosszú szöveg
</div>

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

Результат:

Példa . A wbr tag

Itt pedig adjunk hozzá wbr tag-eket azokra a helyekre, ahol javasoljuk a böngészőnek, hogy végezzen sortörést szükség esetén (figyeld meg, hogy a böngésző nem mindenhol fogja megtenni a töréseket, ahol megjelöltük):

html<div id="elem">
  ez egy super<wbr>super<wbr>super<wbr>long szöveg
</div>

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

Результат:

Példa . A ­ szimbólum

Próbáljuk meg a wbr tag helyett a ­ szimbólumot elhelyezni. A törés helyein kötőjelek jelennek meg:

html<div id="elem">
  ez egy super­super­super­long szöveg
</div>

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

Результат:

Lásd még