Kontrola preloma i razmaka u CSS-u

Uobičajeno ponašanje web čitača je da se tekst prelama na kraju linije, a reči se ne dele. Takođe svi višestruki razmaci i novi redovi (enteri) se ignorišu. Pomoću ovih atributa se to ponašanje može promeniti. Međutim, ako su vam potrebni razmaci među slovima ili veći razmaci među rečima, umesto njihovog ubacivanja u tekst, možete prosto povećati dužinu razmaka.

white-space Način na koji se web čitač ponaša prema razmacima i enterima.
word-wrap Način na koji web čitač vrši prelom linije.
letter-spacing Razmaci između slova.
word-spacing Razmaci između reči u tekstu.
tab-size Veličina tabulatora u tekstu.

white-space

Ovaj atribut određuje način na koji se web čitač ponaša prema razmacima i enterima u tekstu. Normalno ponašanje browser-a je da se višestruki razmaci i novi redovi (enteri) ignorišu, a kada se sa tekstom stigne do kraja bloka ili prozora, prelazi se u sledeći red. Pomoću ovog atributa takvo ponašanje može da se promeni. Vrednosti koje su definisane:

white-space: pre-line;

word-wrap

Način na koji web čitač vrši prelom linije.

word-wrap: break-word;

Primer

Podešavanje div bloka koji bi prikazivao "kompjuterski" tekst.


  div {
    font-family: monospace;
    white-space: pre;
    word-wrap: normal;
  }

css-txt-wrap-sr

letter-spacing

Razmaci između slova. Vrednost se zadaje kao:

letter-spacing: 5px;

word-spacing

Razmaci između reči u tekstu. Vrednost se zadaje kao:

word-spacing: 2pt;

tab-size

Veličina tabulatora u tekstu. Vrednost se zadaje kao:

tab-size: 4;

Primer


  .stil {
    font-family: sans-serif;
    font-size: 12pt;
    letter-spacing: 2pt;
    word-spacing: 4pt;
    tab-size: 2;
  }

css-txt-razmaci-sr
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.