Wbr teqi

wbr teqi brauzerin sətir dəyişməsi edə biləcəyi yeri göstərir (əgər mətn elementin eninə sığmırsa). Belə sətir dəyişmələri yumşaq adlanır.

Bağlayıcı teq tələb etmir.

wbr teqi vasitəsilə söz sətir dəyişdirdikdə sətir dəyişmə simvolu "-" əlavə edilmir. Əgər sizə bu simvol lazımdırsa - yumşaq sətir dəyişmə simvolu ­ istifadə edin (nöqtəli vergül sonda məcburidir, bu səhv deyil).

Yumşaq sətir dəyişməsi ­ brauzerə sətir dəyişməsi edə biləcəyi yeri göstərir (lazım olduqda), bununla da sətir dəyişmə simvolu "-" qoyur.

Yumşaq sətir dəyişmələri ­ işləməyəcək, əgər hyphens xassəsinin dəyəri none olaraq təyin edilibsə (və wbr sətir dəyişmələri işləyəcək).

Nümunə . Sətir dəyişmələri olmayan mətn

Gəlin uzun sözləri olan, blokun həddindən kənara çıxan mətn nümunəsinə baxaq. Bloka kiçik en təyin edək ki, uzun söz onun içinə sığmasın:

html<div id="elem">
  this is supersupersuperlong text
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Nümunə . Wbr teqi

Burada isə, gəlin wbr teqini brauzerə sözün sətir dəyişməsi etməsini məsləhət gördüyümüz yerlərə əlavə edək (diqqət edin ki, brauzer sətir dəyişmələrini bizim göstərdiyimiz hər yerdə etməyəcək):

html<div id="elem">
  this is super<wbr>super<wbr>super<wbr>long text
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Nümunə . &shy; simvolu

Gəlin wbr teqi əvəzinə &shy; simvolunu qoyaq. Sətir dəyişməsi yerlərində defis göstəriləcək:

html<div id="elem">
  this is super­super­super­long text
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Həmçinin bax

  • br teqi,
    ,
    yeni sətirə keçid edir
  • hyphens xassəsi,
    həqiqi söz sətir dəyişmələrini təyin edir
  • word-break və overflow-wrap xassələri,
    uzun sözün hərflərini sətir dəyişdirməyə imkan verir
  • overflow xassəsi,
    blokun həddindən kənara çıxan hissələri kəsir