Stilizovanje i pozicioniranje teksta u kontejneru sa CSS-om

Svojstvo “overflow”

Svojstvo overflow se koristi za definisanje ponašanja sadržaja koji je veći od samog kontejnera u kome se nalazi. Ovo svojstvo nije rezervisano samo za stilizovanje teksta nego za sve vrste sadržaja, mada se za tekst često koristi. Mogući su sledeći slučajevi:

• “visible” – sadržaj je vidljiv čak i preko granica kontejnera (podrazumevano ponašanje)
• “hidden” – višak sadržaja preko ivica kontejera je sakriven
• “scroll” – sadržaj je vidljiv u okviru kontejnera, oba scroll bar-a su aktivna a višak sadržaja je dostupan skorlovanjem
• “auto” – sadržaj je vidljiv u okviru kontejnera, browser odlučuje koji scroll bar je aktivn a višak sadržaja je dostupan skorlovanjem

Primer

See the Pen Overflov by Web programiranje (@chos) on CodePen.

NAPOMENA:
Kada se koristi podrazumevano svojstvo “visible” tekst van kontejnera neće gurati drugi sadržaj, nego će pozicionirati preko njega.

Svojstvo “white-space”

Svojstvo “white-space” se koristi da definiše kako će biti prikazana dodatna prazna mesta i dodatni prazni redovi kao i ponašanje teksta kada dodje do ivice ograničenog kontejnera. Svojstvo može imati sledeće vredosti:

Vrednost “normal”

Kada je dodeljena ova vrednost svojstvu tekst će se standardno prelomiti u naredni red, kada dodje do ivice kontejnera. Neće se prikazivati prazne linije iz koda i dodatna prazna mesta tzv. beline.

Vrednost “nowrap”

Kada je dodeljena ova vrednost svojstvu tekst se neće prelomiti kada dodje do ivice kontejnera, već će ostati u istom redu.

Vrednost “pre”

Kada je dodeljena ova vrednost svojstvu tekst će ostati isti kao što je napisan u kodu, sve zajedno sa praznim mestima. Ukoliko je tekst koji je napisan u kodu duži od kontejnera on se neće prelomiti kada dodje do ivice kontejnera, već će ostati u istom redu, a biće prelomljen samo tamo gde je prelomljen u kodu.

Vrednost “pre-wrap”

Kada je dodeljena ova vrednost svojstvu tekst će ostati isti kao što je napisan u kodu, sve zajedno sa praznim mestima, ali ukoliko je tekst koji je napisan u kodu duži od kontejnera on će se prelomiti kada dodje do ivice kontejnera.

Vrednost “pre-line”

Ovo svojstvo prelama tekst koji je duži od kontejnera, ukida višak praznih mesta (eng. white space), ali zadržava prazne cele linije iz koda, kao i mesta u kodu gde je u kodu prelomljen tekst.

Primer

See the Pen white-space by Web programiranje (@chos) on CodePen.

Svojstvo “text-overflow”

Svojstvo “text-overflow” reguliše ponašanje teksta kada je odsečen jer nije mogao da “stane” u kontejner. Iz ovoga se zaključjuje da se ovo svojstvo primenjuje tek kada je aktivno svojstvo overflow: hidden;

Treba napomenuti da ovo svojstvo važi samo za tekst u jednom redu, stoga je potrebno sprečiti da se tekst iz jednog reda prelomi. Da bi ovo CSS svojstvo bilo aktivno, neophodno je da koristimo i svojstvo white-space: nowrap;

Svojstvo “text-overflow” može da ima sledeće vrednosti: clip ili ellipsis. Vrednost “clip” je podrazumevano “obično” ponašanje kada se tekst preseče tačno na ivici kontejnera. Svojstvo “text-overflow” je interesantno tek kada ima vrednost “ellipsis” jer tada se na kraju gde je presečen tekst pojavljuju tri tačke.

See the Pen Text ellipsis by Web programiranje (@chos) on CodePen.

Prikazivanje skraćene verzije višerednog teksta

Pošto svojstvo “text-overflow” važi samo za jedan red teksta sa njim nećemo moći da uradimo posao, nažalost ne postoji svojstvo koje bi moglo da izvši zadani zadatak a da je podržano u svim browser-ima. Postoje rešenja i za ovaj problem ali su različita za svaki browser ponaosob, pa je neophodno koristiti sva rešenja odjednom da bi pokrili sve browser-e.

a) -webkit-line-clamp

Svojstovo -webkit-line-clamp podržava samo Chrome i Safari. Vrednost ovoga svojstva definiše broj redova koji treba da se prikaže. Neophodno je da se koristi još uz dva dodatna svojstva: display: -webkit-box; i -webkit-box-orient: vertical;.

b) Fade Out Way

Za ovaj mehanizam je potrebno da znamo tačnu visinu jednog reda. Mehanizam se zasniva na tome da delimično prekrijemo poslednju liniju pseudo-elementom, koju ima definisan gradijent sa providnim bojom.

Primer

See the Pen Skraćenje višerednog teksta by Web programiranje (@chos) on CodePen.

Kod za primenu:

See the Pen Skracene višerednog teksta (za sve browsere zajedno) by Web programiranje (@chos) on CodePen.

“overflow-wrap” & “word-break”

Standardno, prelom teksta se javlja samo u određenim prostorima (kada postoji razmak ili crtica), medjutim nekada je potrebno da se prelomi i kada ne postoji razmak ili crtica. Svojstva “overflow-wrap” i “word-break” se minimalno razlikuju i mogu da prelomme tekst kada prevelika reč ne može da stane u kontejner. Najčešća primena svojstva je za prelom dugačkih url adresa. Treba naglasiti da svojstvo “overflow-wrap” ima alias svojstvo pod imenom “word-wrap”.

See the Pen Word-wrap by Web programiranje (@chos) on CodePen.

Razlika izmedju “overflow-wrap” i “word-break” je:

Osnovna razlika je u tome što kada “overflow-wrap” naleti na dugačku reč prvo pokuša da reši problem prebacivanjem cele reči u sledeći red, pa tek ako ne uspe tako da reši problem onda je “lomi”.

See the Pen JravQX by Web programiranje (@chos) on CodePen.

Svojstvo “hyphens”

Svojstvo “hyphens” može da prelomi reč gde god mi želimo. Kada je definisana vrednost svojstva hyphens: manual;, onda se reč prelama gde god stavimo ključnu reč: ­. Takodje na definisanom mestu preloma dodaje “povlaku”.

See the Pen Hypthen by Web programiranje (@chos) on CodePen.

Svojstvo “text-align”

Ovo svojstvo se koristi za pozicioniranje sadržaja block elementa. Moguće vrednosti ovoga svojstva su:

• left – Podrazumevana vrednost pozicionira sadržaj uz levu ivicu.
• right – Pozicionira sadržaj bloka uz desno ivicu.
• center – Centrira sadržaj.
• justify – Širi i rasporedjuje sadržaj od ivice do ivice.
• inherit – Nasledjuje od roditeljskog elementa pozicioniranje.