Svojstvo white-space

Svojstvo white-space podešava kako prelomiti tekst u novi red, kao i kako prikazivati razmake između reči i prelome redova (mesta gde je pritisnut Enter pri unosu koda).

Sintaksa

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

Vrednosti

Vrednost	Opis
`nowrap`	Zabranjuje tekstu da se prelama u drugi red, čak i ako se ne uklapa u širinu kontejnera (u tom slučaju tekst će jednostavno izaći iz njegovih granica). Međutim, dodavanje taga `br` nateraće tekst da se prelomi u novi red.
`pre`	Tekst se prikazuje onako kako je unet u HTML kodu: sa svim razmacima i enter-ima (ako je u kodu uneto više razmaka - na ekranu će takođe biti više). Pri tome browser neće prelamati tekst u novi red, ako se ne uklapa u kontejner - tekst će jednostavno izaći iz njegovih granica. Analogija sa tagom pre, ali za razliku od njega ne menja font na monospace (o monospace fontu pogledaj svojstvo `font-family`.
`pre-wrap`	Isto kao i pre, razlika je u tome što će browser, ako je tekst previše dug i ne staje u kontejner, prelomiti ga u drugi red.
`pre-line`	Browser uzima u obzir samo Enter-e u HTML kodu i ignoriše sve ostalo (više uzastopnih razmaka će izgledati kao jedan, browser sam raspoređuje prelome redova).
`normal`	Podrazumevano ponašanje: browser sam raspoređuje prelome redova tako da se reči uklope u kontejner. Više razmaka u kodu će izgledati kao jedan na ekranu.

Podrazumevana vrednost: normal.

Primer . Vrednost nowrap

U ovom primeru tekst se neće uklopiti u kontejner i izaći će iz njegovih granica, jer je postavljena vrednost 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;
}

Результат:

Primer . Vrednost nowrap i tag br

Ako se doda tag br - tekst će se prelomiti u novi red (tačno na mestu gde stoji 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;
}

Результат:

Primer . Vrednost pre

U ovom primeru tekst se prikazuje onako kako je bio unet u HTML editoru (sa svim uvlačenjima tasterom Tab, sa Enter i tako dalje):

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: pre;
  border: 1px solid red;
}

Результат:

Primer . Vrednost pre-wrap

A sada se tekst prikazuje onako kako je bio unet u HTML editoru, međutim, delovi koji izlaze se prelamaju u novi red:

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;
}

Результат:

Pogledajte takođe

svojstva word-break i overflow-wrap,
koja dozvoljavaju prelom slova duge reči u novi red
svojstvo tab-size,
koje podešava veličinu uvlačenja napravljenog tasterom Tab
svojstvo hyphens,
koje uključuje prelamanje reči po slogovima
svojstvo overflow,
koje odseča delove koji izlaze izvan granice bloka
tag pre,
koji prikazuje tekst onako kako je bio unet u HTML editoru