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:
- normal - web čitač se ponaša kako je uobičajeno, tekst će prelaziti u novi red automatski (default)
- nowrap - web čitač se ponaša kako je uobičajeno, ali tekst neće prelaziti u novi red
- pre - tekst će prelaziti u novi red tamo gde je pritisnut enter, ali ne i automatski, višestruki razmaci i tabulatori se prikazuju
- pre-line - tekst će prelaziti u novi red automatski i na mestima gde je pritisnut enter, ali višestruki razmaci i tabulatori se ignorišu
- pre-wrap - tekst će prelaziti u novi red automatski i na mestima gde je pritisnut enter, višestruki razmaci i tabulatori se prikazuju
white-space: pre-line;
word-wrap
Način na koji web čitač vrši prelom linije.
- normal - reči ostaju cele (default)
- break-word - dugačke reči, koje su duže od samog kontejnera, će biti prelomljene kako bi se prešlo u sledeći red
word-wrap: break-word;
Primer
Podešavanje div bloka koji bi prikazivao "kompjuterski" tekst.
div {
font-family: monospace;
white-space: pre;
word-wrap: normal;
}
letter-spacing
Razmaci između slova. Vrednost se zadaje kao:
- metrika - ova vrednost određuje koliki će biti razmak među slovima
letter-spacing: 5px;
word-spacing
Razmaci između reči u tekstu. Vrednost se zadaje kao:
- metrika - ova vrednost određuje koliki će biti razmak među rečima
word-spacing: 2pt;
tab-size
Veličina tabulatora u tekstu. Vrednost se zadaje kao:
- dekadna vrednost - ova vrednost se zadaje kao običan broj i određuje broj znakova razmaka kolika će biti veličina tabulatora
tab-size: 4;
Primer
.stil {
font-family: sans-serif;
font-size: 12pt;
letter-spacing: 2pt;
word-spacing: 4pt;
tab-size: 2;
}