⌘K

Savybė white-space

Savybė white-space nustato kaip perkelti tekstą į naują eilutę, taip pat kaip rodyti tarpus tarp žodžių ir eilučių lūžius (vietas, kur buvo paspaustas Enter kodu rašant).

Sintaksė

cssselektorius {
  white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Reikšmės

Reikšmė Aprašas
nowrap Uždraudžia tekstui persikelti į kitą eilutę, net jei jis netelpa į konteinerio plotį (tokiu atveju tekstas tiesiog išeis už jo ribų). Tačiau, pridėjus žymą br privers tekstą persikelti į naują eilutę.
pre Tekstas rodomas taip, kaip buvo įvestas redaktoriuje kurdant svetainę: su visais tarpais ir enter-iais (jei kode įvesti keli tarpai - ekrane taip pat bus keli). Tuo pačiu naršyklė neperkels teksto į naują eilutę, jei jis netelpa į konteinerį - tekstas tiesiog išeis už jo ribų.
Analogas žymos pre, bet skirtingai nuo jos nekeičia šrifto į monospace (apie monospace šriftą žr. savybę font-family.
pre-wrap Tas pats, kas ir pre, skirtumas tas, kad jei tekstas per ilgas ir netelpa į konteinerį - naršyklė jį perkels į kitą eilutę.
pre-line Naršyklė atsižvelgia tik į Enter-ius HTML kode ir ignoruoja visa kita (keli tarpai atrodys kaip vienas, naršyklė pati nustato eilučių lūžius).
normal Standartinis elgesys: naršyklė pati nustato eilučių lūžius taip, kad žodžiai tilptų į konteinerį. Keli tarpai kode atrodys kaip vienas ekrane.

Reikšmė pagal nutylėjimą: normal.

Pavyzdys . Reikšmė nowrap

Šiame pavyzdyje tekstas netilps į konteinerį ir išeis už jo ribų, nes nustatyta reikšmė nowrap: 

html<div id="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>
css#elem {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
}

Результат:

Pavyzdys . Reikšmė nowrap ir žyma br

Jei pridėsite žymą br - tekstas persikels į naują eilutę (būtent toje vietoje, kur yra br): 

html<div id="elem">
  Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>
css#elem {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
}

Результат:

Pavyzdys . Reikšmė pre

Šiame pavyzdyje tekstas rodomas taip, kaip buvo įvestas HTML kodo redaktoriuje (su visais atitraukimais klavišu Tab, su Enter ir taip toliau): 

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>
css#elem {
  width: 200px;
  white-space: pre;
  border: 1px solid red;
}

Результат:

Pavyzdys . Reikšmė pre-wrap

O dabar tekstas rodomas taip, kaip buvo įvestas HTML kodo redaktoriuje, tačiau, išeinantys dalys perkeliami į naują eilutę: 

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>
css#elem {
  width: 200px;
  white-space: pre-wrap;
  border: 1px solid red;
}

Результат:

Taip pat žiūrėkite

  • savybės word-break ir overflow-wrap,
    kurios leidžia perkelti ilgo žodžio raides į naują eilutę
  • savybė tab-size,
    kuri nustato atitraukimo, sukurtą klavišu Tab, dydį
  • savybė hyphens,
    kuri įjungia žodžių perkėlimą skiemenimis
  • savybė overflow,
    kuri nukirpą išeinančias už bloko ribų dalis
  • žyma pre,
    kuri rodo tekstą taip, kaip jis buvo įvestas HTML kodo redaktoriuje
BackSavybė writing-modeNextSavybė word-break