Žyma wbr

Žyma wbr nurodo vietą, kur naršyklė gali perkelti eilutę, jei to reikia (jei tekstas netelpa į elemento plotį). Tokie lūžiai vadinami švelniaisiais.

Nereikalauja uždarančios žymės.

Perkeliant žodį per žymą wbr perkėlimo ženklas "-" nepridedamas. Jei jis jums reikalingas - naudokite švelnaus lūžio simbolį ­ (kabliataškis pabaigoje privalomas, tai nėra rašybos klaida).

Švelnusis lūžis ­ nurodo naršyklei vietą, kur ji gali perkelti žodį (jei to reikia), pastatydama tuo pat metu perkėlimo ženklą "-".

Švelnieji lūžiai ­ neveiks, jei savybė hyphens yra nustatyta reikšme none (o lūžiai wbr veiks).

Pavyzdys . Tekstas be lūžių

Pažiūrėkime į teksto pavyzdį, kuriame yra ilgi žodžiai, kurie išsikiša už bloko ribų. Blokui nustatykime mažą plotį taip, kad didelis žodis jame netilptų:

html<div id="elem">
  čia yra supersupersuperilgas tekstas
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Pavyzdys . Žyma wbr

O čia, pridėkime žymą wbr į vietas, kur rekomenduojame naršyklei padaryti žodžio lūžį, jei to reikia (atkreipkite dėmesį į tai, kad naršyklė padarys lūžius ne visur, kur mes nurodėme):

html<div id="elem">
  čia yra super<wbr>super<wbr>super<wbr>ilgas tekstas
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Pavyzdys . Simbolis &shy;

Pabandykime vietoj žymos wbr įdėti simbolį &shy;. Vietose, kur bus atliktas lūžis, bus rodomi brūkšneliai:

html<div id="elem">
  čia yra super­super­super­ilgas tekstas
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Taip pat žiūrėkite

  • žyma br,
    ,
    kuri atlieka perkėlimą į naują eilutę
  • savybė hyphens,
    kuri nustato tikruosius žodžių lūžius
  • savybės word-break ir overflow-wrap,
    kurios leidžia perkelti ilgo žodžio raides
  • savybė overflow,
    kuri nukirpa išsikišusias už bloko ribų dalis